Tag

The status pill.

<sui-tag>MiscStable

About

The status pill for a column of records: Paid, Open, Overdue, Draft. The five tones are the shared ladder, positive, info, attention, critical and neutral, and the app decides which word gets which tone; the element ships no vocabulary. Keep the meaning in the word, never in the color alone.

Usage

<sui-tag label="Paid" severity="positive"></sui-tag> <script type="module"> import { defineCustomElements } from "@shineui/core/loader"; import "@shineui/core/shineui.css"; defineCustomElements(); </script>

import { SuiTag } from "@shineui/react"; import "@shineui/core/shineui.css"; export function Example() { return <SuiTag label="Paid" severity="positive" />; }

import { Component } from "@angular/core"; import { SuiTag } from "@shineui/angular"; @Component({ standalone: true, imports: [SuiTag], template: `<sui-tag label="Paid" severity="positive"></sui-tag>`, }) export class Example { }

Basic

The pill is a plain span with no role, so a screen reader reads the label as text in place. Keep the meaning in the word, never in the color alone; an icon inside the pill is aria-hidden and adds nothing to the name.

<sui-tag label="Paid" severity="positive"></sui-tag>

Severities

A missing or misspelled severity renders neutral. Each tinted pill has a 1px edge in its severity's color, so it keeps its shape on a selected row. Brand mode paints positive and info in brand washes and attention in the accent; semantic mode adds green and gold. Critical is the danger tint in both.

Sizes and icons

md is 11.5px text, sm is 10.5px for dense registers. An icon takes a Font Awesome class and sits before the label.

In a status column

The job the pill exists for. One tag per row, sentence case, one word where the word will carry it.

// setup(root): properties and events setup(root) { const rows = [ { invoice: 'INV-1043', amount: '$4,820.00', status: 'Paid', severity: 'positive' }, { invoice: 'INV-1044', amount: '$1,190.50', status: 'Open', severity: 'attention' }, { invoice: 'INV-1045', amount: '$12,400.00', status: 'Overdue', severity: 'critical' }, { invoice: 'INV-1046', amount: '$310.75', status: 'Draft', severity: 'neutral' }, ]; root.querySelector('#tg-table').innerHTML = rows .map( (r) => `<tr> <td style="${cellStyle}">${r.invoice}</td> <td style="${cellStyle};text-align:right;font-variant-numeric:tabular-nums">${r.amount}</td> <td style="${cellStyle};text-align:right"><sui-tag label="${r.status}" severity="${r.severity}"></sui-tag></td> </tr>`, ) .join(''); }

API

`<sui-tag>`

Properties

Property	Attribute	Type	Default	Description
`icon`	`icon`	`string`string \| undefined		Font Awesome class rendered before the label, e.g. "fa-solid fa-lock".
`label`	`label`	`string`	`''`	Status text.
`severity`	`severity`	`SuiTagSeverity`"attention" \| "critical" \| "info" \| "neutral" \| "positive" \| undefined		Tone of the pill: `positive` (the calm brand wash in brand mode, green in semantic), `info` (the brand's quiet wash), `attention` (the soft accent wash), `critical` (the danger tint), `neutral` (a plain outline). Each tinted pill wears a 1px edge in its severity's color, so it keeps its shape on a selected row. A missing or unknown value renders `neutral`.
`size`	`size`	`"md" \| "sm"`	`'md'`	Pill size: sm 10.5px text, md 11.5px text. Reflected.

Types

`SuiSeverity` type
No members.

`SuiTagSeverity` typeThe shared status ladder; kept under its historical name for callers that import it.
No members.

Theming

Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.