Tag

Tones

<Tag tone="neutral">Applied AI</Tag>
<Tag tone="red">Priority</Tag>
<Tag tone="silver">System</Tag>
<Tag tone="dark">Enterprise</Tag>
<Tag tone="success">Live</Tag>
<Tag tone="warning">Beta</Tag>

In context

<div>
  <h3>Systems Engineering <Tag tone="red">New</Tag></h3>
  <p>Applied AI for complex platforms.</p>
</div>

How Tag works with assistive tech

Role

• status (when live), note (when static)

Keyboard

• not interactive

ARIA attributes

• semantic color — convey meaning textually (tag text) or via aria-label, never color alone

Focus behavior

• not-focusable

When used as a status indicator (e.g., severity), pair with visible text label. Color is decorative — must not be the only channel.