Tag

Use Tag to display a compact piece of message text, such as a status or filter label. Pass plain text with label, or pass children to render your own markup. The component renders nothing when you provide neither.

Import

import { Tag } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
label	string	No	Custom text to display. Ignored when children is set.
children	VNode | VNode[]	No	Content to render instead of the label.

Tag also accepts standard HTML attributes (for example, className), except onChange and icon.

Example

import { Tag, provider } from '/@dropins/tools/components.js';

await provider.render(Tag, { label: 'Shipping' })(document.querySelector('.tag'));

Related

• Icon — render an icon inside a tag through children.
• Design tokens — the colors, spacing, and typography the tag uses.