StatusLine
StableOne quiet line of status for the top of a screen, such as Case, Flipkart, an amount and Waiting.
Also known as status bar, status text, breadcrumb
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
With a current item
<StatusLine items={["Case", "Flipkart", "₹2,340", "Waiting"]} current={3} />The current state keeps the normal ink and a heavier weight. The others are muted.
When to use it
Tells the person where they are and what state it is in, in one line that never takes more than one row.
Made of: Hidden Status prefix · Items · Separators
Do and avoid
Do
- Keep each item to a word or two, with the state last.
- Put the line in a sticky header so it stays in view.
- Give the width from the parent. It shrinks and truncates by itself.
Avoid
- Do not let it wrap to two lines.
- Do not use it to announce changes. It is a plain element, not a live region.
- Do not use colour to show the state. The current item is marked by weight and aria-current.
On a phone
- It stays on one line and cuts the end with an ellipsis, so on a phone the last items can disappear.
- Nothing shows the cut text, so put the current state early or keep the items short.
- It has no tap action.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | ReactNode[] | none | The pieces of the line, in order. A middle dot is drawn between them. |
| current | number | none | Index of the current state. It keeps the normal ink, turns medium weight and is marked aria-current. The other items are muted. |
| label | string | "Status" | Accessible name of the group. |
| className | string | none | Classes for the line. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- truncated
- When the items do not fit the width, the line is cut off with an ellipsis and stays on one row.
Tokens
Change one of these and every part that uses it follows.
--fg--fg-muted--fg-subtle
Built in
- It is a group named by label, with a hidden Status: prefix read first.
- It is not a live region, so it does not speak on every render.
- The separator dots are hidden from screen readers.
- The current item is marked with aria-current and a heavier weight, not colour alone.
What you need to do
- Keep it short. A truncated item is cut off visually, and the full text is still read aloud.
- Do not put links or buttons in the items that you need people to find. Use real navigation for that.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide