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>

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.