Buttons
Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Enable Component
Enable button component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
  bundles: {
    main: {
      pages: ['**/*.html'],
      components: {
        button: true, // Enables `button`, `button-group` and `close-button`
      }
    }
  }
}
Basic Usage
You can build your own using the previewer
<button type="button" class="btn btn-primary">Click me</button>
NameDescription
.btnThe main container
.btn.btn-{variant}Apply default theme
.btn.btn-outline-{variant}Apply outline theme
.btn.btn-soft-{variant}Apply soft theme
.btn.btn-subtle-{variant}Apply subtle theme
.btn.btn-xsmChange button size to smallest
.btn.btn-smChange button size to small
.btn.btn-lgChange button size to large
.btn.disabledSet button on disabled state
Customize variables at:/library/extend/components/_button.scss
Component's defaults:/library/components/button/_defaults.scss
NameDefault valueNote
$btn-init-default-variantstrue
$btn-init-outline-variantstrue
$btn-init-soft-variantstrue
$btn-init-subtle-variantstrue
$btn-padding-y.532rem
$btn-padding-x.75rem
$btn-font-familynull
$btn-font-size$font-size-base
$btn-line-height1.5
$btn-icon-size40px
$btn-padding-y-xsm0.125rem
$btn-padding-x-xsm0.5rem
$btn-font-size-xsm$font-size-xsm
$btn-icon-size-xsm24px
$btn-padding-y-sm0.282rem
$btn-padding-x-sm.75rem
$btn-font-size-sm$font-size-sm
$btn-icon-size-sm32px
$btn-padding-y-lg0.688rem
$btn-padding-x-lg1rem
$btn-font-size-lg$font-size-lg
$btn-icon-size-lg48px
$btn-border-width1px
$btn-font-weight$font-weight-normal
$btn-box-shadowinset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075)
$btn-focus-width0
$btn-focus-box-shadow0
$btn-disabled-opacity.65
$btn-active-box-shadow0
$btn-link-colorproperty.get(link-color)Requires @use "@library/sass/modules/property";
$btn-link-hover-colorproperty.get(link-hover-color)Requires @use "@library/sass/modules/property";
$btn-link-disabled-colorproperty.get(link-disabled-color)Requires @use "@library/sass/modules/property";
$btn-border-radius$border-radius
$btn-border-radius-xsm$border-radius-xsm
$btn-border-radius-sm$border-radius-sm
$btn-border-radius-lg$border-radius-lg
$btn-transitioncolor .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
$btn-close-width1em
$btn-close-height$btn-close-width
$btn-close-padding-x.25em
$btn-close-padding-y$btn-close-padding-x
$btn-close-colorproperty.get(ui-base-color-6)Requires @use "@library/sass/modules/property";
$btn-close-bgurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{theme.get(default, true, ui-base-color-6)}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>")Requires @use "@library/sass/modules/theme";
$btn-close-bg-alturl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{theme.get(alt, true, ui-base-color-6)}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>")Requires @use "@library/sass/modules/theme";
$btn-close-focus-shadownone
$btn-close-opacity.5
$btn-close-hover-opacity.75
$btn-close-focus-opacity1
$btn-close-disabled-opacity.25
$btn-close-white-filterinvert(1) grayscale(100%) brightness(200%)

Make sure to read the Customize components and Understanding and using the design system guides.

{title}