button

Button

Triggers an action such as adding to the cart: solid, outline, soft, ghost or link, in primary, neutral, destructive, inverse and the commerce colours buy and checkout.

States: Default, Hover, Focus, Disabled, Invalid

Parts

Part	File	Does
Button	Button.vue	Lets the user trigger an action, such as adding a product to the cart.

Styling

Part	Recipe
Button	button

Install

Writes 2 files into components/ui/button/. For agents, npx @frontic/ui docs button prints this reference as markdown; the MCP server serves the same.

npm packages: class-variance-authority; reka-ui

API reference

Button Button.vue

Lets the user trigger an action, such as adding a product to the cart. Renders a <button>.

Prop	Type	Default
asChild	boolean	false

as	AsTag \| Component	'button'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'button'
variant	'solid' \| 'outline' \| 'soft' \| 'ghost' \| 'link'	'solid'

color	'neutral' \| 'primary' \| 'destructive' \| 'buy' \| 'checkout' \| 'inverse'	'primary'

size	'md' \| 'xs' \| 'sm' \| 'lg' \| 'icon-xs' \| 'icon-sm' \| 'icon-md' \| 'icon-lg'	'md'

class	ClassValue	—

Data attribute	Values
data-color	'neutral' \| 'primary' \| 'destructive' \| 'buy' \| 'checkout' \| 'inverse'

data-size	'md' \| 'xs' \| 'sm' \| 'lg' \| 'icon-xs' \| 'icon-sm' \| 'icon-md' \| 'icon-lg'

data-variant	'solid' \| 'outline' \| 'soft' \| 'ghost' \| 'link'

Recipe button	Sets
base: button	12 properties · 8 inherited
display `inline-flex` flexShrink `0` alignItems `center` justifyContent `center` border border.default1px solid #e4e4e7 from @action borderColor `transparent` from @action rounded rounded.none0px from @action typography typography.caption500 0.75rem/1.33 'Inter Variable', Inter, sans-serif from @action fontWeight `semibold` from @action textTransform `uppercase` from @action letterSpacing `widest` from @action pressed › translate `0 {spacing.px}` from @action
variant: outline	1 property

variant: link	1 property

color: destructive	2 properties

color: inverse	1 property

size: xs	6 properties

size: sm	6 properties

size: mddefault	6 properties

size: lg	6 properties

size: icon-xs	2 properties

size: icon-sm	2 properties

size: icon-md	2 properties

size: icon-lg	2 properties

variant: solid · color: primary	3 properties

variant: solid · color: neutral	3 properties

variant: solid · color: destructive	3 properties

variant: solid · color: buy	3 properties

variant: solid · color: checkout	3 properties

variant: solid · color: inverse	3 properties

variant: outline · color: primary	4 properties

variant: outline · color: neutral	5 properties

variant: outline · color: destructive	4 properties

variant: outline · color: buy	4 properties

variant: outline · color: checkout	4 properties

variant: outline · color: inverse	4 properties

variant: soft · color: primary	4 properties

variant: soft · color: neutral	5 properties

variant: soft · color: destructive	4 properties

variant: soft · color: buy	4 properties

variant: soft · color: checkout	4 properties

variant: soft · color: inverse	4 properties

variant: ghost · color: primary	3 properties

variant: ghost · color: neutral	4 properties

variant: ghost · color: destructive	3 properties

variant: ghost · color: buy	3 properties

variant: ghost · color: checkout	3 properties

variant: ghost · color: inverse	3 properties

variant: link · color: primary	1 property

variant: link · color: destructive	1 property

variant: link · color: buy	1 property

variant: link · color: checkout	1 property

variant: link · color: inverse	1 property

focus-ringshared state	3 properties

disabledshared state	1 property

invalidshared state	3 properties

Example