DocsBlog

Get Started

Components

Data Grid

Signals

Styling

Theming

↑↓Navigate
↵Select
EscClose
  • 1.8.0

  • Day

    Night

    Preview

    Switch mode
  • cerberus

    acheron

    elysium

    oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerContainer QueryDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTA ModalDate PickerDialogFieldFieldsetFile UploaderIconButtonInputLoading StatesMarqueeMenuNotificationsNumber InputPaginationPin InputPopoverProgress IndicatorsPrompt ModalRadioRatingSelectSliderSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFormat Relative TimeFrameHighlightJSON Tree ViewLocalePortalPresenceShowSwapsplitPropsTheme

IconButton

The IconButton component is a button that displays an icon.

  • npm
  • source
  • recipe
View as Markdown
Open this page in Markdown
Anthropic
Open in Claude
Ask questions about this page
OpenAI
Open in ChatGPT
Ask questions about this page

Import

import { IconButton } from '@cerberus/react'

Usage

Loading example...

Sizes

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

Loading example...

Palette

You can change the palette of the IconButton by using the palette prop.

Loading example...

Usage

You can change the style of the IconButton by using the usage prop.

Loading example...

Shape

You can change the shape of the IconButton by using the shape prop.

Loading example...

Customization

You can customize the IconButton with style props or the Primitive components.

Loading example...

Button as Links

You can create IconButton styled links by using the asChild prop.

Loading example...

Primitives

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

ComponentDescription
IconButtonThe context provider for the Button parts

API

Props

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

NameDefaultDescription
clipboardfalseIf true, uses Clipboard aria-attributes.
paletteactionThe color palette (any of the Cerberus palettes) of the button.
usagefilledThe style treatment of the button.
shapesharpThe shape of the button.

On this page

  • Import
  • Usage
  • Sizes
  • Palette
  • Usage
  • Shape
  • Customization
  • Button as Links
  • Primitives
  • API
    • Props
Edit this page on Github