Button
Displays a button or a link that triggers an action.
Install
Run the following command to install the button component:
npx acc-nuxt add ButtonVariants
Primary
Secondary
Reversed
Colorless
Destructive
Destructive Outlined
With Icons
Left Icon
Right Icon
Both Icons
States
Disabled
Loading
Loading Text
Sizes
Slots
The button component provides the following slots for customization.
#default
The default slot for the button content, including text and icons.
#loader
Slot for customizing the loading indicator displayed when the button is in a loading state.
Props
variant:string— optional
default:primary
Determines the button's visual style. Available options: primary, reversed, secondary, colorless, destructive, destructive-outlined, icon.
disabled:boolean— optional
default:false
When true, disables the button and prevents user interaction.
isLink:boolean— optional
default:false
When true, renders the button as a NuxtLink component instead of a button element.
loadingText:string— optional
default:undefined
When loading is true loadingText is a string, then that string is shown right of the loader.
size:string— optional
default:md
Controls spacing. Options: xs, sm, md, lg