Button

Buttons trigger actions or navigate to new pages. Available in multiple variants and sizes.

Import

import { Button } from '@kikumi3n/ui';

Usage

<Button>Default Button</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

Variants

Variant	Usage
primary	Primary actions (Submit, Save)
secondary	Secondary actions (Cancel, Back)
ghost	Tertiary actions, toolbar buttons
danger	Destructive actions (Delete, Remove)

Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium (default)</Button>
<Button size="lg">Large</Button>

With Icons

<Button leftIcon={<PlusIcon />}>Add Item</Button>
<Button rightIcon={<ArrowRightIcon />}>Continue</Button>

Loading State

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

When loading is true, the button shows a spinner and becomes non-interactive.

API

Prop	Type	Default	Description
variant	'primary' | 'secondary' | 'ghost' | 'danger'	'primary'	Visual variant
size	'sm' | 'md' | 'lg'	'md'	Button size
loading	boolean	false	Show loading spinner
leftIcon	ReactNode	—	Icon before text
rightIcon	ReactNode	—	Icon after text
disabled	boolean	false	Disable interaction

Also accepts all standard <button> HTML attributes.

Accessibility

• Renders as a native <button> element
• Supports aria-label for icon-only buttons
• Disabled state set via native disabled attribute
• Focus visible styling for keyboard navigation

Related

• IconButton — Icon-only button variant
• Link — For navigation actions