V2 componentsUpdated Oct 21, 2026
Mark
A workspace’s tile: the building glyph on a category hue. It names a workspace the way a face names a person, beside its name in a menu, a rail or a header. It is not a logo: once a workspace has one, show the logo at the tile’s size and corner instead. Not for people (use initials) or for apps (use Logo).
Source: packages/ui/src/components/mark
import { Mark, MARK_TONES, MARK_SIZES } from '@highlight/ui'xs (11) is the badge on a face, saying which workspace a person is in. sm (20) fills a menu’s lead lane, so a menu holding both tiles and icons keeps one column. md (26) for a list row, lg (32) for a card row beside a name and its line, xl (36) for a header beside a name and its line.
import { Mark } from '@highlight/ui' export default function MarkSizes() { return ( <div className="flex items-center gap-4"> <Mark size="xs" /> <Mark size="sm" /> <Mark size="md" /> <Mark size="lg" /> <Mark size="xl" /> </div> )}The hue is what tells two workspaces apart, so it is assigned, not chosen for meaning. Purple is the default. The glyph takes the fill’s own ink: inverse on purple and info, dark on teal.
import { Mark } from '@highlight/ui' export default function MarkTones() { return ( <div className="flex items-center gap-4"> <Mark tone="purple" /> <Mark tone="info" /> <Mark tone="teal" /> </div> )}The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.
Mark- A span, aria-hidden: the name beside it is what a screen reader reads.
Props added on top of the underlying element or Base UI part.
| Prop | Type | Default | Description |
|---|---|---|---|
tone | 'purple' | 'info' | 'teal' | 'purple' | The fill. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Tile and glyph together. |
children | ReactNode | — | Replaces the building glyph. Leave unset for a workspace. |
- The corner is the radius scale at sm, md and xl; xs and lg scale the nearest step to their own size.