Buttons

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: