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

@asphalt-react/tag

v2.0.0-rc.4

Published

Tag

Downloads

466

Readme

Tag

npm

Tags are a set of interactive keywords or labels to help organize and categorize content. Tag offers multiple support intents. Tag support icons and actions along with text. You can also customize a Tag.

Usage

import { Tag } from "@asphalt-react/tag"

<Tag>Help</Tag>

Unit components

The Tag family exports unit components using which you can compose a Tag:

  1. TagIcon
  2. TagText
  3. TagAction

Intents

Tag comes with 5 defined intents: neutral (default), success, info, warning and danger.

Customizing a Tag

CustomTag can be helpful when you have to express more than 5 system states. For example, in a complex payment app, a transaction can be in 6 or more states. The Tag component only supports 5 intents - info, warning, success, danger and netural. To support more states for you can use CustomTag.

Do keep in mind, that CustomTag is outside the scope of theming. You must manage all the colors by yourself per your app's design. Here's an example:

import { CustomTag, TagIcon, TagText } from "@asphalt-react/tag";

<CustomTag surface="black" content="#333" intent="white">
  <TagIcon><User /></TagIcon>
  <TagText>A custom tag</TagText>
</CustomTag>

Keyboard Interactions

  • Use tab to move focus to the TagAction component.
  • Use space or enter to interact with the TagAction component.

Accessibility

Tag accepts most global html attributes.

Props

children

Content for Tag.

| type | required | default | | ---- | -------- | ------- | | node | false | N/A |

size

Controls size of the tag. Accepts xs, s, m, l for extra-small, small, medium & large

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |

danger

Applies danger intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

warning

Applies warning intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

info

Applies information intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

success

Applies success intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

accented

Accents the Tag with a disc matching the intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

TagText

Text for the Tag component.

Props

children

Text content for Tag.

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

TagIcon

Icon for the Tag component. Accepts SVG.

Props

children

React node for Tag's icon.

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

size

Size of the Tag's icon. Accepts "xs, "s", "m", "l" for extra-small, small, medium & large.

| type | required | default | | ---- | -------- | ------- | | enum | false | N/A |

TagAction

A Tag can be made interactive, by using the TagAction component. You can pass any interactive element such as Button to invoke actions related to the Tag.

Props

children

React node for tag's action

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

CustomTag

Props

children

Content for the custom Tag.

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

size

Controls size of the tag. Accepts "xs", "s", "m", "l" for extra-small, small, medium & large.

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |

accented

Accents the custom Tag with a disc matching the intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

content

Applies provided color to the text.

| type | required | default | | ------ | -------- | ------- | | string | false | N/A |

intent

Applies provided color to the icon & accent.

| type | required | default | | ------ | -------- | ------- | | string | false | N/A |

surface

Applies provided color as surface color.

| type | required | default | | ------ | -------- | ------- | | string | false | N/A |