CSS Components / Buttons

Buttons

Use the .c-btn component for consistent button styling. Buttons are styled to work together with the focus-visible polyfill. See the Garden React buttons package for enhanced keyboard and event behavior.

Types

Colors

Sizes

States

Elements

Icons

The .c-btn--icon modifier is used to support icon buttons. Style the child image using the .c-btn__icon class. The following examples demonstrate the icon sized as default, small, and large. (See the corresponding Garden React <IconButton> component.)

The .c-btn--basic.c-btn--pill modifiers can be added to create muted, circular icons.

Click the following icon button to apply rotation. Icon rotation is achieved by adding .is-rotated to the .c-btn__icon element.

Playground