Button

UI Showcase › Atom

Button

Atom

Temel interaktif element. 5 görsel stil (variant) ve 5 boyut (size) destekler. disabled ve loading durumları yerleşiktir.

Primary

Preview
Code
<Button variant="primary">Primary</Button>

Secondary

Preview
Code
<Button variant="secondary">Secondary</Button>

Ghost

Preview
Code
<Button variant="ghost">Ghost</Button>

Danger

Preview
Code
<Button variant="danger">Danger</Button>

Outline

Preview
Code
<Button variant="outline">Outline</Button>

Disabled

Preview
Code
<Button variant="primary" disabled>Disabled</Button>

Sizes

Preview
Code
<Button size="xs">XS</Button>
<Button size="sm">SM</Button>
<Button size="md">MD</Button>
<Button size="lg">LG</Button>
<Button size="xl">XL</Button>

Icon left / right

Preview
Code
<Button iconLeft="⬇">Download</Button>
<Button variant="outline" iconRight="→">Next</Button>

Icon only

Preview
Code
<Button iconOnly aria-label="Delete item">✕</Button>

Full width

Preview
Code
<Button fullWidth>Full-width</Button>

Selected / active state

Preview
Code
<Button variant="outline" selected>Selected</Button>
Sourcemodules/ui/Button.tsx