Buttons

Buttons allow users to take actions with a single click or tap.

HTML

<button class="mdf-button">
    Button
</button>

Sass

// Include default styles without configuration
@forward '@miraidesigns/button/styles';

// Configure appearance
@use '@miraidesigns/button' with (
    $variable: value
);

@include button.styles();

Examples

Some basic examples on how the module can be used.

Icons

Icons can help give more meaning or emphasis to your button.

<!-- Leading icon -->
<button class="mdf-button mdf-button--leading-icon">
    <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
        <use href="icons.svg#favorite"></use>
    </svg>

    Favorite
</button>

<!-- Trailing icon -->
<button class="mdf-button mdf-button--trailing-icon">
    Favorite

    <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
        <use href="icons.svg#favorite"></use>
    </svg>
</button>

Implementation

Classes

| Name | Type | Description | | ------------------------------ | -------- | ------------------------------------------------------------------- | | mdf-button | Parent | Apply basic styling to a button element | | mdf-button--bordered | Modifier | Add a border to the button | | mdf-button--filled | Modifier | Fill the button with the brand color | | mdf-button--small | Modifier | Reduced the height and padding of the button | | mdf-button--large | Modifier | Increase the height and padding of the button | | mdf-button--block | Modifier | Stretches the button to width of its parent | | mdf-button--block-responsive | Modifier | Stretches the button to width of its parent (only on small devices) | | mdf-button--leading-icon | Modifier | Adjust spacing for the leading icon | | mdf-button--trailing-icon | Modifier | Adjust spacing for the trailing icon | | mdf-button--icon | Modifier | Icon only button | | mdf-button--raised | Modifier | Elevate button by adding a shadow | | mdf-button--no-hover | Modifier | Remove the button hover effect |

Toggles

A group of buttons where only one option can be active at a time.

HTML

<div class="mdf-toggles">
    <button class="mdf-button mdf-button--toggle" data-toggle-callback="callback1" aria-pressed="false" aria-label="Toggle 1">
        <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
            <use href="icons.svg#add"></use>
        </svg>
    </button>

    <button class="mdf-button mdf-button--toggle mdf-button--active" data-toggle-callback="callback2" aria-pressed="true" aria-label="Toggle 2">
        <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
            <use href="icons.svg#favorite"></use>
        </svg>
    </button>

    <button class="mdf-button mdf-button--toggle" data-toggle-callback="callback3" aria-pressed="false" aria-label="Toggle 3">
        <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
            <use href="icons.svg#clear"></use>
        </svg>
    </button>
</div>

TypeScript

import { MDFToggles } from '@miraidesigns/button';

new MDFToggles(document.querySelector('.mdf-toggles'), {
	callback1: () => {
		console.log('Pressed toggle 1');
	},
	callback2: () => {
		console.log('Pressed toggle 2');
	},
	callback3: () => {
		console.log('Pressed toggle 3');
	},
});

Implementation

Attributes

Please see the WAI-ARIA page for attributes and best practices regarding button toggles.

| Name | Element | Description | | ---------------------- | ---------- | --------------------------------------------------- | | data-toggle-callback | <button> | The name of the callback associated with the toggle |

Classes

| Name | Type | Description | | -------------------- | ---------------- | ---------------------------------------------- | | mdf-toggles | Parent | Contains the toggle elements | | mdf-button--toggle | Child / Modifier | Toggle button element. Child to .mdf-toggles | | mdf-button--active | Modifier | Set toggle as active |

Events

| Name | Data | Description | | ------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | MDFToggle:changed | {callback: string, index: number, toggle: HTMLButtonElement} | Fires whenever the active toggle element changes. Includes the callback name, the index and the element itself |

Properties

| Name | Type | Description | | ----------------------- | ----------------------------- | ------------------------------------------------------ | | .container | HTMLElement | Returns the toggles container element | | .toggles | HTMLButtonElement[] | Returns an Array of all toggle elements | | .callbacks | Record<string, () => void> | Returns an Object holding the toggle callbacks | | .getToggle(index) | (number): HTMLButtonElement | Returns the toggle button element with the given index | | .getActiveToggle() | (): HTMLButtonElement | Returns the currently active toggle element | | .activateToggle(elem) | (HTMLButtonElement): void | Activate the given toggle element |

Options

| Name | Type | Default | Description | | ----------- | ----------------------------- | ------- | ---------------------------------------- | | callbacks | Record<string, () => void> | null | Object containing the toggle callbacks |