/// Data Display
RoleChip
A static operator-role label — neutral ghost-outlined mono, never borrowing a status hue.
import { RoleChip } from "@protocore/pds";Basics
Pass the role via the role prop or as children. It renders as-typed in neutral mono with a faint ghost outline — a role is *identity*, so it never takes a status colour.
In a member list
RoleChip is designed to sit at the trailing edge of a person or service-account row, labelling access without competing with the name or handle.
Ana Petrescu
ana@protocore.io
Deploy Bot
svc/deployer
Radu Ilie
radu@protocore.io
When to use it
Use RoleChip wherever you show *who someone is* in the access model — owner, admin, operator, viewer, service-account. It deliberately looks like a quiet metadata Tag (mono, muted, as-typed) rather than a status Badge, because a role is a durable identity attribute, not a changing state.
Don't reach for a Badge here: giving admin a success tint or viewer a neutral tint implies a value judgement the role doesn't carry. If you genuinely need to flag a *state* of the membership (e.g. "invite pending"), that's a separate Badge next to the RoleChip, not a recolouring of it.
Usage
Do
- Use it for role/identity labels in member lists, audit rows, and access panels.
- Keep role strings lowercase and as-typed to match the values in your IAM system.
- Pair it with an Avatar and handle so the row reads person → identity → role.
- If a membership has a transient state, add a separate Badge rather than tinting the RoleChip.
Don't
- Don't give roles status colours — `admin` is not "danger", `viewer` is not "neutral-good".
- Don't make a RoleChip interactive; to *change* a role, use a Select or a menu.
- Don't overload it with permission scopes — those belong in a DefinitionList or a detail panel.
- Don't invent per-role colours; the neutral treatment is the point.
Accessibility
- RoleChip is a non-interactive `<span>` — screen readers announce the role text inline with the surrounding row.
- Because the label is text (not colour), the role is fully conveyed to monochrome and colour-blind readers by default.
- When a role needs a fuller description for assistive tech, add an `aria-label` or an adjacent visually-hidden expansion (e.g. "operator — can deploy and roll back").
RoleChip props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The role label, when composed as a child instead of via `role`. |
className | string | — | |
role | string | — | The role string, rendered as-typed. Alternative to `children`. |
style | CSSProperties | — |