Mural's Button package
Table of contents
- Installation
- Tests and requirements
- Component usage
- Available Sass mixins
- 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.
- 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.
- Shadow Button
- 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.