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

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

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

Component API

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

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

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

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

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

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.

If you're using your own custom icons, make sure they include the data-slot="icon" prop so they receive the correct styles.

Using as a link

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

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:

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