@miraidesigns/button NPM

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