Button

Used to trigger actions or events.

import { Button, ButtonParts, ButtonGroup } from '@cerberus/react'

Basic Usage

import { Button } from '@cerberus/react'

function BasicButtonPreview() {
  return <Button>Default styles</Button>
}

With Icon

To display an icon, you can use the ButtonParts.Icon component.

import { ButtonParts } from '@cerberus/react'
import { ArrowDownRight } from '@carbon/icons-react'

function WithIconButton() {
  return (
    <ButtonParts.Root>
      With icon
      <ButtonParts.Icon>
        <ArrowDownRight />
      </ButtonParts.Icon>
    </ButtonParts.Root>
  )
}

Pending

To display a loading state, use the ButtonParts.Icon and set the pending prop to true. This will show a spinner in place of the icon.

import { ButtonParts } from '@cerberus/react'

function PendingButtonDemo() {
  return (
    <ButtonParts.Root pending>
      <ButtonParts.Icon />
      Pending
    </ButtonParts.Root>
  )
}

Shapes

The Button component comes in two shapes: sharp and rounded. You can set the shape by using the shape prop.

import { Button } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function ShapesDemo() {
  return (
    <HStack>
      <Button shape="default">Default</Button>
      <Button shape="sharp">Sharp</Button>
      <Button shape="rounded">Rounded</Button>
    </HStack>
  )
}

Usage

The Button component comes in three usage styles: filled, outlined, and ghost. You can set the usage by using the usage prop.

import { Button } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function UsageDemo() {
  return (
    <HStack>
      <Button usage="filled">Filled</Button>
      <Button usage="outlined">Outlined</Button>
      <Button usage="ghost">Ghost</Button>
    </HStack>
  )
}

Sizes

The Button component comes in two sizes: sm, md. You can set the size by using the size prop.

import { Button } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function SizesDemo() {
  return (
    <HStack>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </HStack>
  )
}

Group

You can group buttons together using the ButtonGroup component.

import { Button, ButtonGroup } from '@cerberus/react'

function ButtonGroupDemo() {
  return (
    <ButtonGroup>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </ButtonGroup>
  )
}

Attached Button Group

You can create an attached button group by setting the layout prop to attached.

import { Button, ButtonGroup, IconButton } from '@cerberus/react'
import { ChevronDown } from '@carbon/icons-react'
import { HStack } from 'styled-system/jsx'

function AttachedButtonGroupDemo() {
  return (
    <HStack justify="center" w="full">
      <ButtonGroup layout="attached">
        <Button>Main action</Button>
        <IconButton ariaLabel="View options" shape="square" usage="filled">
          <ChevronDown />
        </IconButton>
      </ButtonGroup>

      <ButtonGroup layout="attached">
        <Button usage="outlined">Main action</Button>
        <IconButton ariaLabel="View options" shape="square" usage="outlined">
          <ChevronDown />
        </IconButton>
      </ButtonGroup>
    </HStack>
  )
}

Primitives

You can utilize the primitive components or the css prop to customize the button.

Component	Description
Button	The context provider for the Button parts
ButtonIcon	The icon/spinner of the button

import { Button } from '@cerberus/react'

function CustomButtonPreview() {
  return (
    <Button
      bgColor="danger.bg.initial"
      color="danger.text.initial"
      rounded="md"
      transform="skew(-10deg)"
      _hover={{
        bgColor: 'black',
        color: 'yellow',
      }}
    >
      Cerberus Forever
    </Button>
  )
}

Global Customization

To enable global customization, you can modify the theme configuration in your panda.config.ts file. For example, to customize the button component globally:

export default createCerberusConfig({
  // ...
  theme: {
    extend: {
      recipes: {
        button: {
          defaultVariants: {
            shape: 'default',
          },
        },
      }
    }
  }
})

This change will set the default shape variant of all buttons to default.

API

Props

The Button component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
palette	`action`	The color palette (any of the Cerberus palettes) of the button.
usage	`filled`	The style treatment of the button.
shape	`sharp`	The shape of the button.
pending	`false`	The loading state of the button. When a button has an `Icon` it will replace it with a spinner. When not, is shows a disabled state.
asChild		Render the Button as the child component.

ButtonGroup Props

Name	Default	Description
layout	`default`	The layout of the button group. Can be `default` or `attached`.
shape	`sharp`	The shape of the buttons in the group. Should match the `shape` prop of the `Button` components used.

Parts

The ButtonParts API is an Object containing the full family of components.

Name	Description
Root	The `Button` component which is the Provider for the family.
Icon	The `ButtonIcon` component which dynamically replaces an icon with a Spinner when the state is `pending`.

On this page

Edit this page on Github