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
{#
  Button
  Base Button component. Builds a <button> element.
  @see    https://designsystem.missouri.edu/components/detail/buttons.html

  @uses   AppendClasses, AddAttributes from @miz/utilties/utils.twig

  @param  {object}    options
  @param  {string}    ├─ options.class
  @param  {object}    ├─ options.attributes
  @param  {string}    ├─ options.type (Required) (button|submit|reset)
  @param  {string}    └─ options.text

  @todo   Possibly require one of the three possible button types.

#}
{% macro Button( options ) %}
  {%- spaceless %}

    {# Imports #}
    {% import "@miz/utilities/utils.twig" as utils %}

    {# Parameters #}
    {% set buttonClass      = "miz-button" %}
    {% set buttonClass      = options.class ? utils.AppendClasses( buttonClass, options.class ) : buttonClass %}
    {% set buttonId         = options.id ? ' id="' ~ options.id ~ '"' : null %}
    {% set buttonAttributes = options.attributes ? utils.AddAttributes( options.attributes ) : null %}
    {% set buttonType       = options.type ?: "button" %}
    {% set buttonText       = options.text ?: "Button" %}

  {% endspaceless -%}

  {# Output #}
  <button class="{{ buttonClass }}"{{ buttonId }} type="{{ buttonType }}"{{ buttonAttributes }}>
    {{ buttonText|raw }}
  </button>

{% endmacro %}

{#
  Button with icon
  Builds a <button> element with an icon.
  @see    https://designsystem.missouri.edu/components/detail/buttons--icon.html

  @uses   Button from @miz/components/buttons/buttons.twig
  @uses   Icon from @miz/components/icons/icons.twig

  @param  {object}    iconOptions See Icon component for more information. This object is passed through using the Icon macro.
  @param  {string}    └─ iconOptions.class

  @param  {object}    options See Button component for available options
  @param  {string}    ├─ options.class
  @param  {string}    └─ options.text

  @todo   Should we add options that create the sizing for the user?
  @todo   Left and right alignment of icon? Currently defaulting to right.

 #}
{% macro ButtonWithIcon( iconOptions, options ) %}
  {%- spaceless %}

    {# Imports #}
    {% import "@miz/utilities/utils.twig" as utils %}
    {% from "@miz/components/buttons/buttons.twig" import Button as button %}
    {% from "@miz/components/icons/icons.twig" import IconSVG as iconSVG %}
    {% from "@miz/components/icons/icons.twig" import Icon as icon %}

    {# Parameters #}
    {% set buttonIconClass      = 'miz-icon--button' %}
    {% set buttonIconClass      = iconOptions.class ? utils.AppendClasses( buttonIconClass, iconOptions.class )|trim : buttonIconClass %}

    {% set buttonClass          = 'miz-button--icon' %}
    {% set buttonClass          = options.class ? utils.AppendClasses( buttonClass, options.class )|trim : buttonClass %}
    {% set buttonText           = options.text ?: '' %}

    {# Variables #}
    {# Create options for Icon and merge with any extra values sent. #}
    {% set buttonIconOptions = {
      "class": buttonIconClass
    } %}
    {% set buttonIconOptions = iconOptions|merge(buttonIconOptions) %}

    {# Create button icon from Icon component #}
    {% set buttonIconComponent = iconOptions ? icon( buttonIconOptions ) : null %}

    {# Create buttonOptions, append Icon to buttonText and merge the rest #}
    {% set buttonOptions = {
      "class": buttonClass,
      "text":  buttonIconComponent ~ buttonText
    } %}
    {% set buttonOptions = options|merge(buttonOptions) %}

  {% endspaceless -%}

  {# Output #}
  {{ button( buttonOptions ) }}

{% endmacro %}

{#
  Anchor button
  Builds an <a> element that acts as a button. Use judiciously.
  @see    https://designsystem.missouri.edu/components/detail/buttons.html

  @uses   AppendClasses, AddAttributes from @miz/utilties/utils.twig

  @param  {object}    options
  @param  {string}    ├─ options.class
  @param  {object}    ├─ options.attributes
  @param  {string}    ├─ options.href
  @param  {string}    └─ options.text

  @todo   Should we add options that create the sizing for the user?

 #}
{% macro AnchorButton( options ) %}
  {%- spaceless %}

    {# Imports #}
    {% import "@miz/utilities/utils.twig" as utils %}

    {# Parameters #}
    {% set anchorClass      = 'miz-button' %}
    {% set anchorClass      = options.class ? utils.AppendClasses( anchorClass, options.class ) : anchorClass %}
    {% set anchorAttributes = options.attributes ? utils.AddAttributes( options.attributes ) : null %}
    {% set anchorHref       = options.href ?: '#' %}
    {% set anchorText       = options.text ?: 'Anchor button' %}

  {% endspaceless -%}

  {# Output #}
  <a href="{{ anchorHref }}" class="{{ anchorClass }}"{{ anchorAttributes }}>{{ anchorText|raw }}</a>

{% endmacro %}

{#
  Menu button
  Builds a <button> specifically used for menus.
  @see    https://designsystem.missouri.edu/components/detail/buttons--menu.html

  @uses   AppendClasses, AddAttributes from @miz/utilties/utils.twig
  @uses   ButtonWithIcon from @miz/components/buttons/buttons.twig

  @param  {object}    options See Button component for available options.
  @param  {object}    └─ options.attributes
  @param  {string}       ├─ options.attributes.id ID for Button.
  @param  {string}       ├─ options.attributes.data-target Value for data-target attribute.
  @param  {string}       └─ options.attributes.aria-label Value for aria-label attribute.

  @todo   Should a user be able to set their own icon here?

 #}
{% macro MenuButton( options ) %}
  {%- spaceless %}

  {# Imports #}
  {% import "@miz/utilities/utils.twig" as utils %}
  {% from "@miz/components/buttons/buttons.twig" import ButtonWithIcon as buttonWithIcon %}

  {# Parameters #}
  {% set buttonClass      = 'navbar-toggler' %}
  {% set buttonClass      = options.class ? utils.AppendClasses( buttonClass, options.class ) : buttonClass %}
  {% set buttonID         = options.attributes.id ?: 'menuButton' %}
  {% set buttonDataTarget = options.attributes["data-target"] ?: 'menuDataTarget' %}
  {% set buttonAriaLabel  = options.attributes["aria-label"] ?: 'Toggle menu' %}

  {# Variables #}
  {% set iconOptions = {
    class: "miz-icon miz-icon--md miz-svg--black",
    name: "menu"
  } %}

  {% set buttonDataTarget = buttonDataTarget | slice(0,1) == '#' ? buttonDataTarget | slice(1) : buttonDataTarget %}
  {% set buttonOptionsAttributes = {
      "id":             buttonID,
      "data-target":    buttonDataTarget,
      "data-toggle":    "collapse",
      "aria-label":     buttonAriaLabel,
      "aria-expanded":  "false",
      "aria-haspopup":  "true",
      "aria-controls":  buttonDataTarget
  } %}
  {% set buttonOptionsAttributes = buttonOptionsAttributes|merge(options.attributes) %}

  {% set buttonOptions = {
    "class": buttonClass,
    "attributes": buttonOptionsAttributes
  } %}
  {% set buttonOptions = options|merge(buttonOptions) %}

  {% endspaceless -%}

  {# Output #}
  {{ buttonWithIcon( iconOptions, buttonOptions ) }}

{% endmacro %}

{#
  Anchor button for dropdown menu
  An Anchor button is used in Dropdown Menus when

  @param {string} classes (optional) CSS classes for anchor button
  @param {string} id (optional)
  @param {string} text
  @param {string} href
  @param {string} ariaLabel

  @todo Should this be deprecated? It is being used in navs.

#}
{% macro menuAnchorButton(params) %}
  {%- spaceless %}

    {# Parameters #}
    {% set anchorClasses    = params.class ?: 'miz-primary-nav-link' %}
    {% set anchorID         = params.id ?: 'menuAnchorButton' %}
    {% set anchorText       = params.text ?: 'Text' %}
    {% set anchorHref       = params.href ?: '#' %}
    {% set anchorAriaLabel  = params.ariaLabel ?: 'Toggle menu' %}

  {% endspaceless -%}

  <a href="{{ anchorHref }}" class="{{ anchorClasses }}" role="button" id="{{ anchorID }}" data-toggle="dropdown" aria-haspopup="true" aria-controls="{{ anchorDataTarget }}" aria-expanded="false" aria-label="{{ anchorAriaLabel }}">{{ anchorText }}
  </a>

{% endmacro %}

        
    
/* 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