components / Content

Tag

Default

The default tag is useful for both visually highlighting and giving user interaction to an element.

Compact

Compact tags are used in areas with small screen space and dense content.

Subtle

A tag can be deemphasized to reduce visual noise.

Tag Group

Tags are frequently paired together to form a tag group.

Close Icon

A tag can also be manually removed by a user.

Icons in Tags

An icon can add additional meaning to a scenario.

Tags in a Form

Tags in a form utilize Sematic UI for functionality.


Statuses

A status tag highlights an item's state. There are two variants per status: bold (default) and subtle. Use the default bold variant when the status tag is important on the page, and the subtle variant for less important situations or when several competing statuses exist on the page.

Info

The default status state.

Inactive

Inactive, disabled, minor states.

Success

Active success state.

Warning

Warning, likely requests user action.