Buttons communicate an action to happen on user interaction.

installyarn add @clayui/button
versionNPM Version
useimport Button from '@clayui/button';
Don’t forget to check WAI-ARIA accessibility pratices for buttons when writting your markup.

Examples

Snippet

Button Variant Sass API

The map $btn-palette allows generating any number of button variants. If a key starts with ., # or %, Clay will output it as is, otherwise we will prepend .btn- to the key (e.g., .btn-primary). It will also generate Sass placeholders prefix/appended by %btn- and %btn-{color}-focus (e.g., %btn-primary and %btn-primary-focus), respectively.

Snippet

Outputs:

Snippet

Sizes

Snippet

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Snippet

Button Size Sass API

The map $btn-sizes allows generating any number of button size variants. If a key starts with btn- Clay will prepend . to the key (e.g., .btn-sm). It will also generate a Sass placeholder prefixed by %clay- (e.g., %clay-btn-sm).

Snippet

Outputs:

Snippet

Active State

Buttons will appear pressed when active. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

Snippet

Disabled State

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

Snippet

Group

Split Button

Split buttons are used when you need to offer the user a quick main action along with secondary actions.

Snippet

Button group

Button groups are used to switch between complementary views for example, but they must never be used for complementary actions, “Change and Cancel” actions, or “Save and Cancel” actions. In those cases, single buttons are the correct solution.

Snippet

Icons

Buttons can display icons instead of text. The icons, however, must be monospaced inside the button. Lexicon doesn’t use buttons with text and icons or text and loading indicators. Icon buttons are used primarily in management bars. This button variation can be primary, secondary, or borderless type.

Try adding the modifier class .btn-monospaced.

Snippet

Button Monospaced Sass API

The map $btn-monospaced-sizes allows generating any number of button monospaced size variants. If a key starts with btn-monospaced- Clay will replace it with .btn-monospaced.btn (e.g., .btn-monospaced.btn-sm). It will also generate a Sass placeholder prefixed by %clay- (e.g., %clay-btn-monospaced-sm).

Snippet

Outputs:

Snippet

With Text Button

This button type is only used in sites, outside of administration. The icon emphasizes and helps communicate the action. The label must match the icon’s purpose.

Wrap the icon with the <span /> tag and adding the Inline Item utilities, try adding the .inline-item.inline-item-(before|after) modifier class.

Snippet

Shapes

Rounded

The class rounded-pill will make the button pill shaped.

Snippet

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM