Button

Basic Buttons

The most basic usage of buttons, showcasing different style variants.

 <div class="cosy:flex cosy:gap-2">
<Button>Default Button</Button>
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="accent">Accent Button</Button>
</div> 

Button States

Buttons support different states.

 <div class="cosy:flex cosy:gap-2">
<Button variant="primary" disabled>Disabled</Button>
<Button variant="primary" loading>Loading</Button>
</div> 

Button Sizes

Multiple sizes available to suit different scenarios.

 <div class="cosy:flex cosy:items-center cosy:gap-2">
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
</div> 

Button Shapes

Buttons support different shape styles.

 <div class="cosy:flex cosy:gap-2">
<Button shape="circle">O</Button>
<Button shape="square">□</Button>
</div> 

Buttons with Icons

Buttons can be used with icons.

 <div class="cosy:flex cosy:gap-2">
<Button>
  <span slot="icon-left">👈</span>
  Left Icon
</Button>
<Button>
  Right Icon
  <span slot="icon-right">👉</span>
</Button>
</div> 

Width Variants

Buttons support different width settings.

 <div class="cosy:flex cosy:flex-col cosy:gap-2">
<Button wide>Wide Button</Button>
<Button block>Block Button</Button>
</div> 

Semantic Variants

Various semantic color variants are available.

 <div class="cosy:flex cosy:flex-wrap cosy:gap-2">
<Button variant="info">Info Button</Button>
<Button variant="success">Success Button</Button>
<Button variant="warning">Warning Button</Button>
<Button variant="error">Error Button</Button>
<Button variant="ghost">Ghost Button</Button>
<Button variant="link">Link Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="neutral">Neutral Button</Button>
</div> 