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

• .c-btn
• .c-btn.c-btn--pill
• .c-btn.c-btn--basic
• .c-btn.c-btn--anchor

Colors

• .c-btn.c-btn--primary
• .c-btn.c-btn--danger
• .c-btn.c-btn--primary.c-btn--danger

Sizes

• .c-btn.c-btn--sm
• .c-btn.c-btn--lg
• .c-btn.c-btn--full.c-btn.c-btn--full.c-btn.c-btn--full

States

Elements

• <a>
• <div>

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.

Playground

<button class="c-btn c-btn--sm c-btn--primary">Submit As <b>Pending</b></button> <button class="c-btn c-btn--icon c-btn--sm c-btn--primary" title="more"> <svg class="c-btn__icon"> <use xlink:href="../index.svg#zd-svg-icon-16-chevron-down-stroke"> </svg> </button>