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
Props
variant:string— optional
default:primary
Determines the button's visual style. Available options: primary, reversed, secondary, colorless, destructive, destructive-outlined.
disabled:boolean— optional
default:false
When true, disables the button and prevents user interaction.
loading:boolean— optional
default:false
Shows the loading state and prevents interaction while active.
isLink:boolean— optional
default:false
When true, renders the button as a NuxtLink component instead of a button element.
to:NuxtLinkProps['to']— optional
default:undefined
NuxtLink destination used when isLink is true.
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
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.
Wrapper configuration
allowedVariants:readonly string[]
default:['primary', 'secondary', 'reversed', 'colorless', 'destructive', 'destructive-outlined']
Variants exposed by the copied playground wrapper.
allowedSizes:readonly string[]
default:['xs', 'sm', 'md', 'lg']
Sizes exposed by the copied playground wrapper.