UI Showcase

Button

Atom

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

Preview

Code

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

Preview

Code

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

Preview

Code

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

Preview

Code

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

Preview

Code

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

Preview

Code

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

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>

Preview

Code

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

Preview

Code

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

Preview

Code

<Button fullWidth>Full-width</Button>

Preview

Code

<Button variant="outline" selected>Selected</Button>