Button

Button component.

Usage

Use <VButton /> to create button component.

View Code

<template>
  <VButton>Button</VButton>
</template>

Colors

Use color prop to change button color.

View Code

<template>
  <VButton color="primary">
    primary
  </VButton>
  <VButton color="secondary">
    secondary
  </VButton>
  <VButton color="warning">
    warning
  </VButton>
  <VButton color="error">
    error
  </VButton>
  <VButton color="success">
    success
  </VButton>
  <VButton color="light">
    light
  </VButton>
  <VButton color="dark">
    dark
  </VButton>
</template>

Disabled

Use disabled prop to make button disabled.

View Code

<template>
  <VButton color="primary" disabled>
    primary
  </VButton>
  <VButton color="secondary" disabled>
    secondary
  </VButton>
  <VButton color="warning" disabled>
    warning
  </VButton>
  <VButton color="error" disabled>
    error
  </VButton>
  <VButton color="success" disabled>
    success
  </VButton>
  <VButton color="light" disabled>
    light
  </VButton>
  <VButton color="dark" disabled>
    dark
  </VButton>
</template>

Size

Use size prop to change button size.

View Code

<template>
  <VButton color="primary" size="sm">
    Button
  </VButton>
  <VButton color="primary">
    Button
  </VButton>
  <VButton color="primary" size="lg">
    Button
  </VButton>
</template>

Variant

Use variant prop to change button style.

View Code

<template>
  <VButton color="primary">
    Default
  </VButton>
  <VButton color="primary" variant="tertiary">
    Tertiary
  </VButton>
  <VButton color="primary" variant="ghost">
    Ghost
  </VButton>
  <!-- more code -->
</template>

Icons

Use <Icon /> component to add icon to the button.

View Code

<template>
  <VButton color="primary">
    <Icon name="ic:round-search" class="w-5 h-5" />
  </VButton>
  <VButton color="primary" variant="tertiary">
    <Icon name="ic:round-search" class="w-5 h-5" />
  </VButton>
  <VButton color="primary" variant="ghost">
    <Icon name="ic:round-search" class="w-5 h-5" />
  </VButton>
  <!-- more code -->
</template>

Rounded

Use rounded prop to make button rounded shape.

View Code

<template>
  <VButton color="primary" rounded>
    Button
  </VButton>
  <VButton color="primary" variant="tertiary" rounded>
    Button
  </VButton>
  <VButton color="primary" variant="ghost" rounded>
    Button
  </VButton>
  <!-- more code -->
</template>

Shadow

Use shadow prop to add shadow to the button.

View Code

<template>
  <VButton>
    Button
  </VButton>
  <VButton shadow>
    Button
  </VButton>
  <VButton shadow="sm">
    Button
  </VButton>
  <VButton shadow="md">
    Button
  </VButton>
  <VButton shadow="lg">
    Button
  </VButton>
  <VButton shadow="xl">
    Button
  </VButton>
  <!-- more code -->
</template>

Block

Use block prop to make button full width.

View Code

<template>
  <VButton block color="primary">
    Yes, accept changes
  </VButton>
  <VButton block>
    Cancel, revert back
  </VButton>
</template>

Props

Prop Name	Type	Accepted Values	Default Value	Description
`type`	`String`	-	`undefined`	Specifies the type of the button.
`color`	`String`	`'primary'`, `'secondary'`, `'warning'`, `'error'`, `'success'`, `'light'`, `'dark'`	`'light'`	Specifies the color scheme of the button.
`rounded`	`Boolean`	-	`false`	Whether to apply rounded corners to the button.
`variant`	`String`	`'primary'`, `'tertiary'`, `'ghost'`	`'primary'`	Specifies the variant of the button.
`block`	`Boolean`	-	`false`	Whether the button should take up the full width of its container.
`to`	`[String, Object]`	-	`undefined`	The target route of the button. If provided, the button will be rendered as a `nuxt-link`.
`href`	`String`	-	`undefined`	The URL to link to if the button is not using a `nuxt-link`.
`size`	`String`	`'sm'`, `'md'`, `'lg'`	`'md'`	Specifies the size of the button.
`shadow`	`[Boolean, String]`	`true`, `false`, `'sm'`, `'md'`, `'lg'`, `'xl'`	`false`	Whether to apply a shadow to the button, and the size of

Events

No custom events.