Tag

Introduction

Tags are great for lists of strings. Tag is a stateless wrapper around its children with support for an optional close button. It also supports all HTML <span> props.

Examples

DefaultRoundprescriptionpulseMinimalInteractive (click me!)warning-signpersonRemovable

Usage

Tag

import React from "react";
import { Tag } from "@commure/components-foundation";
function MyTag() {
return (
<Tag
intent="primary"
icon="add"
interactive>
value
</Tag>
);
}
export default MyTag;

API Reference

Tag

Prop NameRequired?TypeDescription
activefalsebooleanWhether the tag should appear in an active state.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
fillfalsebooleanWhether the tag should take up the full width of its container.
iconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render before the children.
intentfalseIntentVisual intent color to apply to element.
interactivefalsebooleanWhether the tag should visually respond to user interactions. If set to `true`, hovering over the tag will change its color and mouse cursor. Recommended when `onClick` is also defined.
largefalsebooleanWhether this tag should use large styles.
minimalfalsebooleanWhether this tag should use minimal styles.
multilinefalsebooleanWhether tag content should be allowed to occupy multiple lines. If false, a single line of text will be truncated with an ellipsis if it overflows. Note that icons will be vertically centered relative to multiline text.
onClickfalse(e: MouseEvent<HTMLDivElement>) => voidCallback invoked when the tag is clicked. Recommended when `interactive` is `true`.
onRemovefalse(e: MouseEvent<HTMLButtonElement>, tagProps: ITagProps) => voidClick handler for remove button. The remove button will only be rendered if this prop is defined.
rightIconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render after the children.
roundfalsebooleanWhether this tag should have rounded ends.

Related Reading

Blueprint Reference