@asphalt-react/tag

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

type	required	default
string	true	N/A

size

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

type	required	default
enum	false	"m"

danger

Applies danger support look

type	required	default
bool	false	false

warning

Applies warning support look

type	required	default
bool	false	false

info

Applies information support look

type	required	default
bool	false	false

success

Applies success support look

type	required	default
bool	false	false

dismissible

Renders tag with an interactive cross icon

type	required	default
bool	false	false

onDismiss

Function to be called when tag is dismissed

React's synthetic event is available as an argument

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

type	required	default
func	false	N/A