Button

Examples

<Button> renders a native <button type="button"> by default, styled with the color prop for one of Chassis's context colors.

import { Button } from '@chassis-ui/react'

export const Example = () => {
  return <Button color="primary">Save</Button>
}

Colors

Set color to one of Chassis's context colors to change a button's background and foreground.

import { Button } from '@chassis-ui/react'
import { COLORS } from '../../utils'

export const Example = () => {
  return (
    <>
      {COLORS.map((color) => (
        <Button key={color} color={color}>
          {color}
        </Button>
      ))}
    </>
  )
}

Style variants

Layer variant on top of color to change a button's fill instead of its palette.

Outline

Set variant="outline" for a transparent background with a colored border and text — a lower-emphasis alternative to a solid button in the same color.

import { Button } from '@chassis-ui/react'
import { COLORS } from '../../utils'

export const Example = () => {
  return (
    <>
      {COLORS.map((color) => (
        <Button key={color} color={color} variant="outline">
          {color}
        </Button>
      ))}
    </>
  )
}

Smooth

Set variant="smooth" for a subdued, tinted background in the button's color, softer than the default solid fill.

import { Button } from '@chassis-ui/react'
import { COLORS } from '../../utils'

export const Example = () => {
  return (
    <>
      {COLORS.map((color) => (
        <Button key={color} color={color} variant="smooth">
          {color}
        </Button>
      ))}
    </>
  )
}

Link

Set variant="link" to make a button look and behave like a hyperlink while keeping its color and click behavior — a lower-emphasis action inside a toolbar or form. variant="link" is a button-specific style, not a context color: pass it alongside color, not instead of it.

import { Button } from '@chassis-ui/react'
import { COLORS } from '../../utils'

export const Example = () => {
  return (
    <>
      {COLORS.map((color) => (
        <Button key={color} color={color} variant="link">
          {color}
        </Button>
      ))}
    </>
  )
}

Root element

Set component to render <Button> as a different element — "a" for navigation, "input" for legacy form markup, or any custom component. href implies component="a" automatically, so setting href alone is enough for a link button.

import { Button } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <Button type="submit" color="primary">
        Button
      </Button>
      <Button component="a" href="#" color="primary" role="button">
        Link
      </Button>
      <Button component="input" type="button" color="primary" value="Input" />
      <Button component="input" type="submit" color="primary" value="Submit" />
      <Button component="input" type="reset" color="primary" value="Reset" />
    </>
  )
}

A button rendered as <a> for something other than navigation — collapsing content, for example — needs an explicit role="button"; Chassis doesn't add it automatically, since not every component="a" usage is a non-navigation action. type only affects <button> and <input>; it has no effect when rendered as <a>.

A plain tag other than "button", "a", or "input" (for example "span") gets keyboard activation, focus handling, and role="button" synthesized automatically, matching native button behavior. A component reference (for example a router's Link) doesn't: it's trusted to bring its own semantics, since stamping role="button" onto the <a> it renders would be wrong.

Router links with asChild

To render a router's link component with button styling, pass it as the child with asChild, instead of passing it by reference to component. The button's classes, props and ref are merged onto the child element, and the router link still handles navigation:

import Link from 'next/link'
import { Button } from '@chassis-ui/react/button'

<Button asChild variant="outline">
  <Link href="/login">Log in</Link>
</Button>

A disabled button treats the child as it treats component="a": the link gets aria-disabled="true" and tabindex="-1", and its click is blocked.

This form also works from a React Server Component. component={Link} there fails to build with "Functions cannot be passed directly to Client Components", because a component reference is a function and can't cross the server-to-client boundary. A JSX element can. See Server-side rendering.

Sizes

Set size to "sm" or "lg" to adjust a button's padding and font size; the default renders at md size.

import { Button } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <Button color="primary" size="sm">
        Small
      </Button>
      <Button color="primary">Medium</Button>
      <Button color="primary" size="lg">
        Large
      </Button>
    </>
  )
}

Pressed state

Set pressed to mark a toggle-style button as active — e.g. a formatting toolbar button that stays highlighted while its feature is on. It applies the .active class and sets aria-pressed, so assistive technology announces "button, pressed" instead of treating the button as a navigation link. A button that is a link (href, or an <a> as component or the asChild element) gets the class alone: a link has no pressed state to announce. Give it role="button" if it acts as a toggle, and it takes aria-pressed too.

import { useState } from 'react'
import { Button } from '@chassis-ui/react'

export const Example = () => {
  const [pressed, setPressed] = useState(false)

  return (
    <Button color="primary" pressed={pressed} onClick={() => setPressed(!pressed)}>
      Bold
    </Button>
  )
}

Disabled state

Set disabled to make a button non-interactive. A native <button> or <input> uses the real disabled attribute, which blocks keyboard and pointer interaction on its own.

import { Button } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Button color="primary" size="lg" disabled>
      Button
    </Button>
  )
}

<a> has no disabled attribute, so a disabled link button sets aria-disabled="true" and tabindex="-1" instead, and blocks its own click handler and navigation.

import { Button } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Button component="a" href="#" color="secondary" size="lg" disabled>
      Link
    </Button>
  )
}

Scope

No automatic role="button" on non-navigation links. Rendering <Button> with component="a" for an action rather than navigation (see Root element) still needs an explicit role="button" — Chassis can't distinguish the two cases from href alone.

API

Button