Buttons

The Button component provides you with a standard <button> element. They should be used in forms where the user is submitting information or to activate a setting or feature.

Usage

Import buttons.twig and the macro, set your options and call the macro to output:

{% from "@miz/components/buttons/buttons.twig" import Button as button %}

{%- set myButtonOptions = {
  "text":   "My button",
  "type":   "submit",
  "class":  "miz-button--primary"
} -%}

{{ button( myButtonOptions ) }}

The above code will output:

<!-- Button output -->
<button class="miz-button miz-button--primary" type="submit">
  My button
</button>

See the View tab for each button variation to see an example of how it is being used.

Accessibility

Buttons must have a discernible name for screenreaders. The <button> element can easily be made accessible by adding text that describes the button’s use.

Our macros are made accessible easily by passing a value to the macro with the text parameter. Aria attributes can be added, if necessary, by using the attributes parameter.

{%- set ariaButtonExample = {
  "text":   "Submit",
  "attributes": {
    "aria-label": "Submit"
  }
} -%}

See https://dequeuniversity.com/rules/axe/3.2/button-name for more information.

Macro reference

Button( options )

This is the default button you should use. Do not use this macro if you are simply wanting a link styled as a button; use the AnchorButton() macro instead.

Param Default Values Description
class miz-button String Additional classes appended to the button
attributes null Object Attributes to be applied to the button
type button String One of button, submit, or reset
text Button String The text to be displayed on the button

AnchorButton( options )

Our .miz-button classes are primarily meant to be used with a <button> element. You can use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger functionality give these links a role="button" attribute to appropriately convey their purpose to screen readers.

Note: While it may not break functionality to use the .miz-button classes on an <a> tag, consider whether a simple link without the class may serve you just as well. Buttons should convey a level of interactivity to the user that normal links to other webpages do not.

Param Default Values Description
class miz-button String Additional classes appended to the anchor button
attributes null Object Attributes to be applied to the anchor button
href # String The URL for the anchor button
text Anchor button String The text to be displayed in the anchor button

ButtonWithIcon( iconOptions, buttonOptions )

If you need an Icon placed within the button, use the ButtonWithIcon() macro and pass an additional Icon object to the macro along with your Button options.

Note: As of the current release, this macro only supports placing the Icon in front of the text and not the reverse. If necessary, we will provide this variant in a future release.

iconOptions

Param Default Values Description
class miz-icon--button String Additional classes appended to the button
attributes null Object Attributes to be applied to the button
name '' String Name of the MDI icon you want to use

buttonOptions

Param Default Values Description
class miz-button--icon String Additional classes appended to the button
attributes null Object Attributes to be applied to the button
type button String One of button, submit, or reset
text Button String The text to be displayed on the button
{% from "@miz/components/buttons/buttons.twig" import Button as button %}
{% from "@miz/components/buttons/buttons.twig" import AnchorButton as anchorButton %}

<h2>Primary buttons</h2>

<p><b>Default</b></p>

{%- set buttonOptions = {
  "class":  "miz-button--primary",
  "text":   "Primary button"
} -%}

<p>{{ button( buttonOptions ) }} {{ anchorButton( buttonOptions ) }}</p>

<p><b>Light</b></p>

{%- set buttonOptions = {
  "class":  "miz-button--primary miz-button--light",
  "text":   "Primary button"
} -%}

<p>{{ button( buttonOptions ) }} {{ anchorButton( buttonOptions ) }}</p>

<p><b>Ghost</b></p>

{%- set buttonOptions = {
  "class":  "miz-button--ghost-gold",
  "text":   "Primary button"
} -%}

<p class="miz-fill--black p-4">{{ button( buttonOptions ) }} {{ anchorButton( buttonOptions ) }}</p>
<h2>Primary buttons</h2>

<p><b>Default</b></p>
<p>
    <button class="miz-button miz-button--primary" type="button">
    Primary button
  </button>

    <a href="#" class="miz-button miz-button--primary">Primary button</a>

</p>

<p><b>Light</b></p>
<p>
    <button class="miz-button miz-button--primary miz-button--light" type="button">
    Primary button
  </button>

    <a href="#" class="miz-button miz-button--primary miz-button--light">Primary button</a>

</p>

<p><b>Ghost</b></p>
<p class="miz-fill--black p-4">
    <button class="miz-button miz-button--ghost-gold" type="button">
    Primary button
  </button>

    <a href="#" class="miz-button miz-button--ghost-gold">Primary button</a>

</p>
/* No context defined for this component. */
  • Content:
    ////
    /// Buttons
    /// Classes and utilities to be used with buttons and
    /// anchor elements meant to be used as buttons.
    ///
    /// @author <Jason Rollins rollinsj@missouri.edu>
    ///
    ////
    
    // Buttons
    $miz-button__color: $miz-black !default;
    $miz-button__font-family: $miz-font-family-base !default;
    $miz-button__font-size: $miz-font-size-base !default;
    $miz-button__font-size--sm: $miz-font-size-sm !default;
    $miz-button__font-size--lg: $miz-font-size-lg !default;
    $miz-button__font-weight: $miz-font-weight-normal !default;
    $miz-button__line-height: $miz-line-height-base !default;
    $miz-button__text-transform: none !default;
    $miz-button__background-color--default: $miz-white !default;
    $miz-button__border-width: 1px !default;
    $miz-button__border-style: solid !default;
    $miz-button__border-color--default: darken($miz-black, 10%) !default;
    $miz-button__border-radius: 0 !default;
    $miz-button__transition-property: all !default;
    $miz-button__transition-duration: 0.1s !default;
    $miz-button__transition-timing-function: ease-in-out !default;
    $miz-button__transition-delay: 0 !default;
    $miz-button__transition:
      $miz-button__transition-property
      $miz-button__transition-duration
      $miz-button__transition-timing-function;
    $miz-button__padding-y: $miz-space-default !default;
    $miz-button__padding-x: $miz-space-default !default;
    
    /// Base button style
    .miz-button {
      display: inline-block;
      font-family: $miz-button__font-family;
      font-weight: $miz-button__font-weight;
      text-decoration: none;
      text-transform: $miz-button__text-transform;
      text-align: center;
      vertical-align: middle;
      transition: $miz-button__transition;
    
      @include text-crop--open-sans;
      @include miz-button__size(
        $miz-button__padding-y,
        $miz-button__padding-x,
        $miz-button__font-size,
        $miz-button__line-height,
        $miz-button__border-radius
      );
    
      color: $miz-button__color;
      // background-color: $miz-button__background-color--default;
      border:
        $miz-button__border-width
        $miz-button__border-style
        $miz-button__border-color--default;
    
      &:focus {
        outline: 0;
        box-shadow: 0 0 0 $miz-space-xxs $miz-black-200;
      }
    
      &:hover,
      &:focus {
        background-color: $miz-black-100;
      }
    
      &:active {
        background-color: $miz-black-200;
        box-shadow: 0 0 0 $miz-space-xxs $miz-black-200;
      }
    }
    
    /// Button Modifiers
    
    /// Primary Button style
    .miz-button--primary {
      $theme-color: map-get($theme-colors, 'primary');
      $background-color: $theme-color;
      $border-color: darken($theme-color, 10%);
      $font-color: $miz-button__color;
    
      color: $font-color;
    
      @include miz-button__variant('lighten', $background-color, $font-color, $border-color);
    
      &.miz-button--light {
        @include miz-button__variant('darken', $miz-gold-300, $font-color, $border-color);
      }
    }
    
    // Secondary Button style
    .miz-button--secondary {
      $theme-color: map-get($theme-colors, 'secondary');
      $background-color: $theme-color;
      $border-color: darken($theme-color, 10%);
      $font-color: $miz-white;
    
      color: $font-color;
    
      @include miz-button__variant('lighten', $background-color, $font-color, $border-color);
    
      &.miz-button--light {
        @include miz-button__variant('darken', $miz-black-400, $font-color, $border-color);
      }
    }
    
    // Ghost Button style
    .miz-button--ghost {
      $color: $miz-black-100;
      $background-color: $color;
    
      @include miz-button__variant('alpha', $background-color, $border-color);
    }
    
    // Ghost Gold Button style
    .miz-button--ghost-gold {
      $color: $miz-gold;
      $background-color: $color;
    
      @include miz-button__variant('alpha', $background-color, $border-color);
    }
    
    // Button with Icon
    .miz-button--icon {
      // @include text-crop;
    }
    
    // Small Button style
    .miz-button--small {
      @include button-size(
        $miz-space-s,
        $miz-space-s,
        $miz-button__font-size--sm,
        1.5,
        $miz-button__border-radius
      );
    }
    
    // Large Button style
    .miz-button--lg {
      @include button-size(
        $miz-space-l * 0.75,
        $miz-space-l,
        $miz-button__font-size--lg,
        1.5,
        $miz-button__border-radius
      );
    }
    
    // Square Button
    // Most Button spacing is "squished" (smaller on top and bottom than
    // on the sides). This makes a square button.
    .miz-button--square-sm {
      &::before,
      &::after {
        display: none;
      }
    }
    
  • URL: /components/raw/miz-buttons/_buttons.scss
  • Filesystem Path: fractal/pattern-library/miz/components/buttons/_buttons.scss
  • Size: 4.2 KB