DocsBlog

  • 1.0.0

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridGroupNewLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPaginationNewPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

Button

Used to trigger actions or events.

  • npm
  • source
  • recipe
import { Button } from '@cerberus/react';

Usage

With Icon

To display an icon, use the ButtonParts API.

Note

When using the pending prop, the icon will be replaced with a spinner.

Pending

To display a loading state, use the ButtonParts.Icon and set the pending prop to true.

Shapes

Use the shape prop to set the shape of the button. The Button component comes in three shapes: default, sharp and rounded.

Usage

Use the usage prop to set the usage style of the button. The Button component comes in three usage styles: filled, outlined, and ghost.

Sizes

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

Group

You can group buttons together using the ButtonGroup component.

Attached Button Group

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

Primitives

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

ComponentDescription
Button.RootThe context provider for the Button parts
Button.IconThe icon/spinner of the 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:

panda.config.ts
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:

NameDefaultDescription
paletteactionThe color palette (any of the Cerberus palettes) of the button.
usagefilledThe style treatment of the button.
shapesharpThe shape of the button.
pendingfalseThe 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.
asChildRender the Button as the child component.

ButtonGroup Props

NameDefaultDescription
layoutdefaultThe layout of the button group. Can be default or attached.
shapesharpThe 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.

Note

It is best to only use the ButtonParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.

NameDescription
RootThe Button component which is the Provider for the family.
IconThe ButtonIcon component which dynamically replaces an icon with a Spinner when the state is pending.

On this page

  • Edit this page on Github
Cerberus Design System | Docs
Copy
import { Button } from '@cerberus/react'

export function BasicDemo() {
  return <Button>Default</Button>
}
Copy
import { ButtonParts } from '@cerberus/react'
import { ArrowDownRight } from '@carbon/icons-react'

export function IconDemo() {
  return (
    <ButtonParts.Root>
      With icon
      <ButtonParts.Icon>
        <ArrowDownRight />
      </ButtonParts.Icon>
    </ButtonParts.Root>
  )
}
Copy
import { ButtonParts } from '@cerberus/react'

export function PendingDemo() {
  return (
    <ButtonParts.Root pending>
      <ButtonParts.Icon />
      Pending
    </ButtonParts.Root>
  )
}
Copy
import { Button } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

export function ShapesDemo() {
  return (
    <HStack>
      <Button shape="default">Default</Button>
      <Button shape="sharp">Sharp</Button>
      <Button shape="rounded">Rounded</Button>
    </HStack>
  )
}
Copy
import { Button } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

export function UsageDemo() {
  return (
    <HStack>
      <Button usage="filled">Filled</Button>
      <Button usage="outlined">Outlined</Button>
      <Button usage="outlined-subtle">Outlined Subtle</Button>
      <Button usage="ghost">Ghost</Button>
    </HStack>
  )
}
Copy
import { Button } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

export function SizeDemo() {
  return (
    <HStack>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
    </HStack>
  )
}
Copy
import { Button, ButtonGroup } from '@cerberus/react'

export function GroupDemo() {
  return (
    <ButtonGroup>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </ButtonGroup>
  )
}
Copy
import { Button, ButtonGroup, IconButton } from '@cerberus/react'
import { ChevronDown } from '@carbon/icons-react'
import { HStack } from 'styled-system/jsx'

export function AttachedDemo() {
  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>
  )
}
Copy
import { Button } from '@cerberus/react'

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