Button

Clickable button with multiple variants, sizes, and keyboard binding support.

Also known as: action button, CTA, call-to-action, submit button, click target

View in Storybook

When to use

• Primary actions and form submissions. Use variant="transparent" for secondary actions.
• For navigation, use type="link". For icon-only actions in toolbars, omit children.

Import

import { Button } from '@vacano/ui'

Usage

<Button>Default Button</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Delete</Button>

Variants

Variant	Description
normal	Default gray button
system	Blue system action button
success	Green success button
warning	Yellow warning button
danger	Red danger/delete button
transparent	Transparent background

<Button variant="normal">Normal</Button>
<Button variant="system">System</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="danger">Danger</Button>
<Button variant="transparent">Transparent</Button>

Sizes

<Button size="default">Default</Button>
<Button size="compact">Compact</Button>

With Icon

import { IconPlus } from '@vacano/ui/icons'

<Button icon={<IconPlus size={16} />}>Add Item</Button>

Keyboard Bindings

Display and respond to keyboard shortcuts:

<Button keyBindings={['Meta', 'S']}>Save</Button>
<Button keyBindings={['Meta', 'Enter']}>Submit</Button>

Loading State

<Button loading>Saving...</Button>

Full Width

<Button fullWidth>Full Width Button</Button>

Link Button

<Button type="link">Link Style</Button>

Props

Prop	Type	Default	Description
children	string	-	Button label text
variant	'normal' | 'system' | 'success' | 'warning' | 'danger' | 'transparent'	'normal'	Visual variant
size	'compact' | 'default'	'default'	Button size
type	'button' | 'submit' | 'reset' | 'link'	'button'	Button type
icon	ReactNode	-	Icon element
keyBindings	KeyboardEventKey[]	[]	Keyboard shortcut keys
loading	boolean	false	Show loading spinner
disabled	boolean	false	Disable button
fullWidth	boolean	false	Full width button
className	string	-	CSS class name for the root element
classnames	ButtonClassNames	-	Custom class names for inner elements
ref	Ref<HTMLButtonElement>	-	Ref to the underlying button element
data-test-id	string	-	Test identifier attribute

All standard HTML button attributes are also supported.

ClassNames

Key	Description
label	Label text element
icon	Icon container
binding	Keyboard binding display

Related

• KeysBindings - Keyboard shortcut display
• Spinner - Loading indicator used in Button's loading state