Hire us

Button

Variant

<script lang="ts" setup>
import { NNButton } from "@fronntui/vue";
</script>


<template>
  <NNButton>Default</NNButton>
  <NNButton variant="tertiary">Tertiary</NNButton>
  <NNButton variant="neutral">Neutral</NNButton>
  <NNButton variant="primary">Primary</NNButton>
</template>

Size

<NNButton>Default</NNButton> <NNButton size="small">Small</NNButton>

Disabled

<NNButton disabled>Default</NNButton>
<NNButton variant="tertiary" disabled>Tertiary</NNButton>
<NNButton variant="neutral" disabled>Neutral</NNButton>
<NNButton variant="primary" disabled>Primary</NNButton>

Custom Tag

Link Button 
<NNButton tag="a" href="#">Link Button</NNButton>

Props

Name
Type
variant
'default' | 'primary' | 'tertiary' | 'neutral'

Size of the button, defaults to default.

size
'default' | 'small'

Button variant, defaults to default.

tag
string

The HTML tag to use. Defaults to button.

Action

Action Buttons can be passed an async function, which is executed on click.

While running, the button shows a loading state.

The button shows a success state when the promise is fulfilled and an error state when the promise is rejected.

<script setup>
import { NNActionButton } from "@fronntui/vue";


const successAction = () =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, 1000);
  });


const errorAction = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error());
    }, 1000);
  });
</script>


<template>
  <NNActionButton :action="successAction">Success</NNActionButton>
  <NNActionButton :action="errorAction">Error</NNActionButton>
</template>

Props

Name
Type
action
() => Promise<void>

The action to be run

variant
'default' | 'primary' | 'tertiary' | 'neutral'

Button variant, defaults to primary.

timeout
number

The time after which the button’s state is reset to ready. Defaults to 3000ms

pendingDelay
number

The delay after which the button state is set to pending. This prevents displaying the loading indicator for fast actions. Defaults to 100ms

disabled
boolean

Whether or not the button should be disabled

Close Button

Close Buttons can be used to close elements. They are used in components like Dialog or Drawer.

<script setup>
import { NNCloseButton } from "@fronntui/vue";
const close = () => {
  /* close something */
};
</script>


<template>
  <NNCloseButton @click="close" />
</template>
© 2024  inniti