The 📁 base/_buttons.scss file contains the basic button style, while the 📁 custom-style/_buttons.scss file is where you create your custom buttons.

To help you in the process of customizing your buttons, the framework includes some CSS custom properties to set font-size, padding, and border-radius:

:root {
  --btn-font-size: 1em;
  --btn-font-size-sm: calc(var(--btn-font-size) - 0.2em);
  --btn-font-size-md: calc(var(--btn-font-size) + 0.2em);
  --btn-font-size-lg: calc(var(--btn-font-size) + 0.4em);
  --btn-radius: 0.25em;
  --btn-padding-x: var(--space-sm);
  --btn-padding-y: var(--space-xs);

The .btn class includes the style applied to all the button components. The class modifiers can be used to create button variations.

Class Description
.btn basic style of all button components
.btn--primary main call-to-action button style
.btn--accent used to draw particular attention to the button (e.g., destructive actions)
.btn--subtle subtle style variation, used for secondary actions or in combo with primary/accent button.
.btn--disabled used for feedback, to identify a button that is disabled
.btn--sm button size small
.btn--md button size medium
.btn--lg button size large

Fork the pen below or use our Buttons Editor to create your custom buttons: