@asphalt-react/tag v1.17.0

Tag

Tags are a set of interactive keywords or labels to help organize and categorize content. In addition to a default variant, Tag offers all support variants success, info, warning and danger.

By default tag renders only the label, however the support variants come with a circular disc of corresponding color as a prefix to the tag label.

A tag can be made dismissible. Most global html attributes can be applied to tags.

Usage

import Tag from "@asphalt-react/tag"

<Tag>Help</Tag>

Keyboard Interactions

• Use tab to move focus to the dismissible icon.

• Use space or enter to interact with the dismissible icon.

✨ Use @asphalt-react/stack with <Tag> when multiple tags are desired.

Props

children

Keyword or label for the tag

size

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

danger

Applies danger support look

warning

Applies warning support look

info

Applies information support look

success

Applies success support look

dismissible

Renders tag with an interactive cross icon

onDismiss

Function to be called when tag is dismissed

React's synthetic event is available as an argument

 ({targetsEvent}) => console.log(targetsEvent)