Button

You know, those things you click to do just about anything in a web application.

import { Button } from '@/components/button'

function Example() {
  return <Button>Save changes</Button>
}

Component API

PropDefaultDescription
Button extends the Headless UI Button component or the Link component
typebuttonThe button type.
colordark/zincThe color variant the button should use.
outlinefalseWhether to use the outline button style.
plainfalseWhether to use the plain button style.
disabledfalseWhether or not to disable the button.
href-The target URL when using the button as a link.

Examples

Button colors

Use the color prop to set the button color:

import { Button } from '@/components/button'

function Example() {
  return <Button color="cyan">Save changes</Button>
}

For a full list of included color variants, check out the solid color reference.

Outline buttons

Use the outline prop for a secondary button style with no shadows or background color:

import { Button } from '@/components/button'

function Example() {
  return <Button outline>Save draft</Button>
}

Plain buttons

Use the plain prop for a simple button style with no border, shadows or background color:

import { Button } from '@/components/button'

function Example() {
  return <Button plain>Save draft</Button>
}

Disabled states

Use the disabled prop to disable a button and apply disabled styles:

import { Button } from '@/components/button'

function Example() {
  return <Button disabled>Save changes</Button>
}

The disabled prop is not supported when using the href prop.

With icon

Icons may be place at the start or end of a button:

import { Button } from '@/components/button'
import { PlusIcon } from '@heroicons/react/16/solid'

function Example() {
  return (
    <Button>
      <PlusIcon />
      Add item
    </Button>
  )
}

The icon prop accepts both component constructors like PlusIcon, as well as component instances like <PlusIcon />.

The Button component is designed to work best with 16×16 icons.

Add the href prop to render a Link that has the same visual styling as a button:

import { Button } from '@/components/button'

function Example() {
  return <Button href="/get-started">Get started</Button>
}

Link buttons support all of the same props as regular buttons except disabled.

Appendix

Solid color reference

By default, Catalyst includes three adaptive color variants that automatically change color between light and dark modes to maintain a consistent level of contrast:

ColorExample
dark/zinc
light
dark/white

Catalyst also includes 20 solid colors that don't change outside of subtle global changes we make to all buttons in dark mode:

ColorExample
dark
zinc
white
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose