# Button

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

## Button types

```js
<SilkeBox wrap gap align="center" fill>
  <SilkeButton label="Primary" />
  <SilkeButton label="Label and icon" icon="add" />
  <SilkeButton icon="add" />
</SilkeBox>
```

## Button variants

```js
<SilkeBox gap column>
  <SilkeTitle kind="xs">Standard buttons</SilkeTitle>
  <SilkeBox wrap gap="s">
    <SilkeButton label="Primary" />
    <SilkeButton label="Secondary" kind="secondary" />
    <SilkeButton label="Danger" kind="danger" />
    <SilkeButton label="Ghost" kind="ghost" />
    <SilkeButton label="Upgrade" kind="upgrade" />
  </SilkeBox>

  <SilkeTitle kind="xs">Icon only</SilkeTitle>
  <SilkeBox wrap gap="s">
    <SilkeButton icon="add" />
    <SilkeButton icon="add" kind="secondary" />
    <SilkeButton icon="add" kind="danger" />
    <SilkeButton icon="add" kind="ghost" />
    <SilkeButton icon="add" kind="upgrade" />
  </SilkeBox>

  <SilkeTitle kind="xs">Standard buttons with icon</SilkeTitle>
  <SilkeBox wrap gap="s">
    <SilkeButton icon="add" label="Primary" />
    <SilkeButton icon="add" label="Secondary" kind="secondary" />
    <SilkeButton icon="add" label="Danger" kind="danger" />
    <SilkeButton icon="add" label="Ghost" kind="ghost" />
    <SilkeButton icon="add" label="Upgrade" kind="upgrade" />
  </SilkeBox>

  <SilkeTitle kind="xs">Disabled</SilkeTitle>
  <SilkeBox wrap gap="s">
    <SilkeButton disabled icon="add" label="Primary" />
    <SilkeButton disabled icon="add" label="Secondary" kind="secondary" />
    <SilkeButton disabled icon="add" label="Danger" kind="danger" />
    <SilkeButton disabled icon="add" label="Ghost" kind="ghost" />
    <SilkeButton disabled icon="add" label="Upgrade" kind="upgrade" />
  </SilkeBox>
</SilkeBox>
```

## Loading buttons

```jsx
<SilkeBox gap column>
  <SilkeTitle kind="xs">Standard buttons</SilkeTitle>
  <SilkeBox wrap gap="s">
    <SilkeButton label="Primary" />
    <SilkeButton label="Secondary" kind="secondary" />
    <SilkeButton label="Danger" kind="danger" />
    <SilkeButton label="Ghost" kind="ghost" />
    <SilkeButton label="Upgrade" kind="upgrade" />
  </SilkeBox>

  <SilkeTitle kind="xs">Loading buttons</SilkeTitle>
  <SilkeBox wrap gap="s">
    <SilkeButton label="Primary" loading />
    <SilkeButton label="Secondary" kind="secondary" loading />
    <SilkeButton label="Danger" kind="danger" loading />
    <SilkeButton label="Ghost" kind="ghost" loading />
    <SilkeButton label="Upgrade" kind="upgrade" loading />
  </SilkeBox>
</SilkeBox>
```

## Button sizes (base and small)

```js
<SilkeBox gap fill column>
  {[undefined, 'base', 's'].map((size) => (
    <SilkeBox wrap gap key={size}>
      <SilkeButton label={size + ''} size={size} />
      <SilkeButton label={size + ''} icon="add" size={size} />
      <SilkeButton icon="add" size={size} />
    </SilkeBox>
  ))}
</SilkeBox>
```

## Button group

```js
<SilkeButtonSet>
  <SilkeButton label="Secondary" kind="secondary" />
  <SilkeButton flex label="Primary" />
</SilkeButtonSet>
```

## Confirmation Button

```js
const handleConfirm = () => console.log('Confirmed');

<SilkeButtonSet>
  <SilkeConfirmationButton
    label="Default confirmation"
    message="Confirm this"
    title="You sure"
    onConfirm={handleConfirm}
  />
  <SilkeConfirmationButton
    kind="danger"
    flex
    label="Danger confirmation"
    confirmLabel="Delete"
    message="Confirm this"
    title="You sure"
    onConfirm={handleConfirm}
  />
</SilkeButtonSet>;
```

## Big button

```jsx
<>
  <SilkeBigButton leftIcon="figma" label="Big button" subLabel="Sub label" rightIcon="add" />
  <SilkeBigButton leftIcon="figma" label="Big button" subLabel="Sub label" rightIcon="add" />
  <SilkeBigButton leftIcon="figma" label="Big button" subLabel="Sub label">
    Custom content
  </SilkeBigButton>
  <SilkeBigButton
    leftIcon="figma"
    label="Big button"
    subLabel="Sub label"
    leftIconColor="neutral-5"
    leftIconBgColor="support-tertiary-60"
  >
    Custom content
  </SilkeBigButton>
</>
```
