@muraldevkit/ds-component-button

Mural's Button package

Table of contents

1. Installation
2. Tests and requirements
3. Component usage
4. Available Sass mixins
5. Accessibility considerations

Installation

Review the design system's global usage guidelines to learn how to install components. This package's name is @muraldevkit/ds-component-button.

Tests and requirements

The Mural Design System generates Exported Tests (see @muraldevkit/ds-exported-tests package) to write tests in a reusable and importable fashion. The tests directory contains a requirements.ts file that will allow the mrl-button component to be tested in the environment in which it is implemented.

The requirements.ts file has parity with the component's functional requirements and must be updated as the requirements change.

For detailed instruction on implementing Exported Tests, please review our dev environment's Exported Test implementation guidance.

Component usage

Review individual component READMEs for available properties.

1. Button
   • Note: This component is temporarily being deprecated in favor of the Shadow Button. It will be updated to use the Shadow Button's implementation in a future release.
2. Shadow Button
3. Icon Button
   • Note: This component dynamically applies the class mrl-iconButton-trigger to the element to support keyboard accessibility. Do not apply custom styles using this class as it is not guaranteed to always be on the element.
   • For animated icon buttons, the default number of animation loops is set to 3. This value can be changed by passing in a configuration object to the config prop of the button's animated SVG child component (for more information, see the @muraldevkit/ds-component-svg documentation).

Available Sass mixins

To support the reuse of styles across sub-components, the design system provides multiple mixins. You can also use these within products as a way to maintain consistency for component extensions.

Accessibility considerations

Review the button's accessibility documentation to learn more about specific considerations taken and to follow when adopting this component.