Buttons

Edit the 📁 custom-style/_buttons.scss file to create your custom buttons.

The .btn class includes the style applied to all the button components.

The following 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
`.btn--icon`	button containing (only) an icon

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

If you want to create fixed-sized button variations (e.g., a button with a height equal to 40px), you can create class modifiers that set the desired size:

/* 👇 example: custom height utility classes */
.height-30, .height-40, .height-50 {
  height: var(--height);

  &.btn, &.form-control {
    line-height: var(--height);
    padding-top: 0;
    padding-bottom: 0;
  }
}

.height-30 { --height: 30px; }
.height-40 { --height: 40px; }
.height-50 { --height: 50px; }

/* 👇 example: custom width utility classes */
.width-40, .width-120 {
  width: var(--width);

  &.btn {
    padding-left: 0;
    padding-right: 0;
  }
}

.width-40  { --width: 40px; }
.width-120 { --width: 120px; }

Here's a live example: