Design System

Navigation & tags

Wayfinding and metadata components: tags, chips, breadcrumbs, tabs, pagination, steppers and the three levels of app navigation chrome. Resize the window to see the responsive notes in action.

Tag

Static metadata label for categories, keywords and filters. Semantically distinct from Badge, which stays the source of truth for status.

import { Tag } from "@/design-system";

Variants and sizes

EngineeringDesignSmall

Removable

FrontendQ3 roadmap

Accessibility

  • Non-interactive by default; the remove affordance is its own focusable button with an accessible name derived from the tag text.
  • Never used to convey status — pair with Badge for that.

Chip / ChipGroup

Interactive filter and selection controls. Chip renders a real button with aria-pressed; ChipGroup adds roving-tabindex keyboard navigation and single or multiple selection.

import { Chip, ChipGroup } from "@/design-system";

Standalone chips

Single-select group

Arrow keys move focus between chips.

Multiple-select group

Accessibility

  • Chip is a real <button> with aria-pressed reflecting selection.
  • The remove control is a sibling <button> with its own label (buttons cannot nest) rather than part of the selectable surface.
  • ChipGroup exposes role="group" with an accessible label; Arrow keys move focus, Home/End jump to the ends.

AvatarGroup

Stacks the Avatar primitive to show collaborators at a glance, collapsing extras into a “+N” overflow indicator.

import { AvatarGroup } from "@/design-system";

Sizes and overflow

With add control

onAdd renders a dashed leading control for inviting another person.

Accessibility

  • The stack is a single role="group" with one combined accessible label naming the first few people; individual avatars are aria-hidden to avoid repetition.

Tabs

Built on Radix Tabs. Three visual treatments — line, pill, enclosed — share the same keyboard behaviour. The tab list scrolls horizontally on narrow screens instead of wrapping.

import { Tabs, TabList, Tab, TabPanel } from "@/design-system";

Line (default)

Team velocity is up 12% this sprint across all three squads.

Pill and enclosed

Daily rollup.
Source snippet.

Accessibility

  • Full Radix keyboard support: arrow keys move between tabs, Home/End jump to the ends, panels are lazily focus-managed.
  • Active tab is marked via data-state and carries text + underline/fill — never colour alone.

Pagination

Page-number navigation with previous/next IconButtons and ellipsis for long ranges.

import { Pagination, PaginationItem, PaginationFirst, PaginationPrevious, PaginationNext, PaginationLast, PaginationEllipsis } from "@/design-system";

Interactive

With first / last

showFirstLast adds jump-to-edge controls for long ranges; both disable when you are already at that bound.

Accessibility

  • The wrapper is a nav landmark with an aria-label.
  • Previous/Next/First/Last reuse IconButton, which already requires an accessible label; they disable at the range bounds.
  • The current page carries aria-current="page" plus a solid fill, not colour alone.

Stepper

Shows progress through a multi-step flow, horizontally or vertically. Each state pairs an icon/number with text — never colour alone.

import { Stepper, Step, StepIndicator, StepLabel, StepDescription, StepConnector } from "@/design-system";

Horizontal

  1. Completed

    Account

  2. Completed

    Company

  3. 3Current step

    Billing

  4. 4Upcoming

    Review

Vertical

  1. Completed

    Order placed

    12 Mar, 09:14

  2. 2Current step

    Preparing shipment

    Estimated 1–2 days

  3. 3Upcoming

    Delivered

States

Upcoming, current, complete, error and disabled. Each state pairs a distinct glyph (number, check, alert, dash) with its label.

  1. Completed

    Details

  2. Error

    Payment

    Card was declined — update it to continue.

  3. 3Current step

    Review

  4. 4Upcoming

    Confirm

  5. Not available

    Invoicing

    Available on annual plans only.

Accessibility

  • The current step carries aria-current="step".
  • Complete steps show a check glyph, not just a colour change; upcoming steps are visually de-emphasised via text tone, not disabled semantics.
  • Error steps combine the error token with an alert icon and a visually hidden status word, so the failure is never colour-only.

TopNavigation

Application header: brand slot, primary links and an actions slot. Links wrap to a new row on small screens instead of being clipped.

import { TopNavigation, TopNavigationLink } from "@/design-system";

Example

Accessibility

  • Primary links live in their own nav landmark, separate from the header element.
  • The active link is marked with aria-current="page".

MobileNavigation

Compact bottom navigation bar for small viewports. Each destination is at least 44px tall to meet touch-target guidance.

import { MobileNavigation, MobileNavItem } from "@/design-system";

Example