DocsBlog

  • 1.2.1

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPaginationPin InputPopoverNewProgressPrompt 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:


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.

On this page

  • Edit this page on Github
Copy
import { Button } from '@cerberus/react'

export function BasicDemo() {
  return <Button>Default</Button>
}
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>
  )
}
Copy
'use client'

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

export function IconDemo() {
  return (
    <Button>
      With icon
      <Button.Icon>
        <ArrowDownRight />
      </Button.Icon>
    </Button>
  )
}
Copy
'use client'

import { Button } from '@cerberus/react'

export function PendingDemo() {
  return (
    <Button pending>
      <Button.Icon />
      Pending
    </Button>
  )
}
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>
  )
}

import { createCerberusConfig } from '@cerberus/panda-preset'

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