---
title: Button
category: General
summary: Used for any type of user action, including navigation.
---

```jsx live
const themes = [
  { title: 'Default' },
  { title: 'Primary', theme: 'primary' },
  { title: 'Warning', theme: 'warning' },
  { title: 'Error', theme: 'error' },
  { title: 'Info', theme: 'info' },
]
const variants = ['fill', 'outline', 'naked']
render(
  <StackView alignment="center" spacing={1}>
    {variants.map((variant) => (
      <StackView key={variant} axis="horizontal" spacing={1}>
        {themes.map(({ title, theme }) => (
          <Button key={title} title={title} theme={theme} variant={variant} />
        ))}
      </StackView>
    ))}
  </StackView>
)
```

```jsx live
render(
  <StackView axis="horizontal">
    <StackView
      axis="horizontal"
      padding={1}
      spacing={1}
      backgroundColor="grey-2"
    >
      <Button title="Dark" theme="dark" />
      <Button title="Dark" theme="dark" variant="outline" />
      <Button title="Dark" theme="dark" variant="naked" />
    </StackView>
    <StackView
      axis="horizontal"
      padding={1}
      spacing={1}
      backgroundColor="grey-8"
    >
      <Button title="Light" theme="light" />
      <Button title="Light" theme="light" variant="outline" />
      <Button title="Light" theme="light" variant="naked" />
    </StackView>
  </StackView>
)
```

```jsx live
render(
  <StackView
    axis="horizontal"
    padding={1}
    spacing={1}
    backgroundColor="primary-light"
  >
    <Button title="White" theme="white" />
    <Button title="White" theme="white" variant="outline" />
    <Button title="White" theme="white" variant="naked" />
    <Button title="Light" theme="light" />
    <Button title="Light" theme="light" variant="outline" />
    <Button title="Light" theme="light" variant="naked" />
  </StackView>
)
```

```jsx live
render(
  <StackView spacing={2}>
    <StackView axis="horizontal" alignment="start" spacing={1}>
      {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Button
          key={size}
          size={size}
          title="person"
          spinner={true}
          variant="outline"
        />
      ))}
    </StackView>

    <StackView axis="horizontal" alignment="start" spacing={1}>
      {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Button key={size} size={size} title="Button" />
      ))}
    </StackView>

    <StackView axis="horizontal" alignment="start" spacing={1}>
      {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Button
          key={size}
          size={size}
          title="Button"
          iconLeft={{ name: 'people' }}
        />
      ))}
    </StackView>

    <StackView axis="horizontal" alignment="start" spacing={1}>
      {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Button
          key={size}
          size={size}
          title="Button"
          iconRight={{ name: 'arrow-down' }}
        />
      ))}
    </StackView>

    <StackView axis="horizontal" alignment="start" spacing={1}>
      {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Button
          key={size}
          size={size}
          icon={{ name: 'person' }}
          tooltip={{ title: 'person' }}
          radius="circle"
        />
      ))}
    </StackView>
  </StackView>
)
```