Tag

A small tag used for marking and categorization.

Types

Tag types

DefaultPrimarySuccessWarningDangerInfo

Example

Radius & size

Radius & size

PillXSSmallMediumLargeXL

Example

size supports five tiers: xs / small / medium (default) / large / xl; invalid values fall back to medium with a warning.

Closable

Clicking × dispatches oas-close (cancelable; preventDefault can prevent removal).

Closable tags

ClosableClick × to closeRemoved after close

Example

Chip & clickable

chip: pill radius + compact padding; clickable: the whole tag is clickable, dispatching oas-click on click/Enter/Space.

Chip

Default chipPrimary chipSuccess chipWarning chipClosable chip

Example

Clickable

Click me to dispatch oas-clickClickable chipRegular clickable tagDisabled, not clickable

Example

In chip mode, disabled tags cannot be clicked (no oas-click) nor closed (close button disabled).

Icon tags

The default slot can hold an icon — combining an icon and text forms an icon tag.

Icon tags

FeaturedCompletedFollowScheduled

Example

API

Attributes

Attribute	Description	Type	Default
chip	Chip (pill radius + compact padding)	boolean	—
clickable	Whole tag clickable (focusable, dispatches oas-click)	boolean	—
closable	Closable	boolean	—
disabled	Disabled (cannot be clicked or closed)	boolean	—
round	Rounded	boolean	—
size	Size: xs / small / medium (default) / large / xl; invalid values fall back to medium with a warning	TagSize	medium
type	Type	TagType	default

Events

Event	Description
oas-click	Whole-tag click (when clickable), detail contains originalEvent
oas-close	Close, cancelable; preventDefault prevents removal

Slots

Name	Description
default	—