Tag

Usage

• Use Tags for user-generated, interactive categorization — items a person can add, apply, and remove: filter criteria, audience attributes, selected options.
• Use Badge, not Tag, for read-only system indicators: statuses, categories, metadata, and counts. Tags are interactive; Badges are read-only.
• Render a dismissible Tag (onDelete) when the person can remove the item; a Tag without onDelete has no close button.

Variants

• variant="default" — filled with the active surface color, no border. The standard look.
• variant="path" — subtle fill with a solid border.
• variant="dashed" — plain background with a dashed border.

Behaviors

• Dismissal (onDelete) — providing the callback renders the close button and invokes it on click. Omitting the prop removes the button entirely.
• Disabled state (isDisabled) — greys out the tag and sets aria-disabled.
• Compact size (isCompact) — renders the smaller style. There is no size enum; compact is the only size option.

Implementation Notes

• Content — React uses children; Ember uses {{yield}} via <PlumaTag>Text</PlumaTag>.
• The close button renders as a real button element with aria-label="Close". Pass unsafe_withSpanDeleteButton to render it as a span with role="button" instead — required when the Tag sits inside another interactive element where nested buttons are invalid.
• Pass unsafe_withDeleteButtonMouseDownStopPropagation to stop mousedown propagation from the close button — for Tags inside drag targets or click-away regions.
• There is no color prop. Tags render in a single neutral palette per variant; colored chips are Badge's job.