Socket
Socket
Sign inDemoInstall

@muraldevkit/ds-component-button

Package Overview
Dependencies
2
Maintainers
2
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @muraldevkit/ds-component-button

Mural's design system's Button component


Version published
Weekly downloads
54
increased by8%
Maintainers
2
Created
Weekly downloads
 

Readme

Source

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.

FAQs

Last updated on 28 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc