Button

View Source

Used for any type of user action, including navigation.

Default

Primary

Warning

Error

Info

Default

Primary

Warning

Error

Info

Default

Primary

Warning

Error

Info

Copy

Edit

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>
)

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>
)

Dark

Light

Copy

Edit

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>
)

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>
)

White

Light

Copy

Edit

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>
)

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>
)

person

Button

Copy

Edit

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>
)

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>
)

Props

disabledboolean

Disables button by removing click handlers and making the button transparent.

externalboolean

Opens the linked destination in a new window or tab.

iconstring | Object

Renders an Icon in the center of the button. Pass a string or any valid Icon props. Must pass a title or tooltip.title when using icon-only buttons.

iconLeftstring | Object

Same as above, but renders an icon in the left portion of the button.

iconRightstring | Object

Same as above, but renders an icon in the right portion of the button.

sizeunknown

Sizes the button using values defined in boxSizes

spinnerany

Renders a <Spinner /> in the center of the button. Accepts any valid Spinner props.

squareboolean

Uses a 1:1 ratio for sizing the button.

themestring | boolean

Uses theme defined in buttons.theme. Pass false to not use theme at all.