npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@muraldevkit/ds-component-button

v1.1.2

Published

Mural's design system's Button component

Downloads

388

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

mural-devvelmural-devvelmuralcomuralco

Keywords

Readme

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.