D Experience

Components

Browse every component available for D Experience projects — PRIZM core styled with D Experience tokens, plus D Experience local components.

Use the left navigation to jump to a component. The ◇ marker means a D Experience local component — reusable in D Experience, not a PRIZM core component.

◇ D Experience local

Surface anatomyWhere each component sits — labelled visual.

Jump to component

Components preview

Light mode is the default for D Experience systems. Dark mode is optional for preview/testing only.

Actions

Things users click to do something.

Button

View docs

Trigger an action. Six visual variants and four sizes.

Rule: Use one clear primary action per section or decision point.

Usage guidancePlacement, pairing, and button style rules.

Bottom-right action group; Outline before primary.

Button style usage

Primary— main action.
Outline— alternative or cancel.
Ghost / subtle— quiet supporting action.
Destructive— risky or irreversible action.
Link / text— navigation or inline action, not form submission.

Icons in buttons

Text-only is the default; add an icon only when it improves recognition or repeated scanning.
The text label stays the source of meaning.
Leading icon— object or action, e.g. Add, Download.
Trailing icon— direction or state, e.g. Next, External link, Dropdown.

Icon-only buttons

For compact secondary or utility actions only.
Not for the main primary CTA, form submit, or unclear destructive actions.
Always give an accessible label (aria-label) and a tooltip on hover/focus.

Examples

For spacing and horizontal alignment of related controls, see Group.

Forms

Inputs, fields, and form controls.

Input

View docs

Use Input for short, single-line text or numeric values.

Usage

For short, single-line values.
Pair with a label; add helper or error text when needed.
Disabled = not editable and skipped on submit; read-only = focusable and submitted, just not editable.

Examples & variantsLabels, required fields, and validation states.

Labels & validation

Fields marked with * are required.

Full name

Email*

Reference number

Enter a valid 6-digit reference.

Red text or border signals a validation error only — never use it to mark a field required. If most fields are required, mark the optional ones instead.

Textarea

View docs

Use Textarea for longer free-text responses.

Usage

For multi-line text entry.
Show a character count only when a length limit matters.
Over the limit, show an error and the exceeded count — never silently block typing.

Examples & variantsCharacter count, within-limit and over-limit states.

Character count

Summary

0 / 200

Summary

10 characters over the limit.210 / 200

Show a count only when a limit matters. Over the limit, show the error and exceeded count — keep letting the user type and edit down.

Checkbox

View docs

Binary toggle.

Notify on critical alerts

Radio Group

View docs

Pick one of several mutually exclusive options.

Critical

High

Medium

Low

Switch

View docs

Toggle a setting on or off.

Auto-refresh feeds

Select

View docs

Use Select when users choose one option from a short, fixed list.

Usage

Use for a short, fixed list of options.
For search or long lists, use Combobox.

Behaviour notesPopup placement and alignment.

Menu opens below the trigger and matches its width.

Combobox

View docs

Use Combobox when users need to search, filter, or type to find an option.

Usage

Use when search or typeahead helps — long or unfamiliar lists.
Avoid for simple 2–5 option choices — use Select.

Behaviour notesPopup placement and alignment.

Popup aligns to the trigger and stays clear of screen edges.

Slider

View docs

Pick a numeric value within a range.

Usage

Show the selected value when it matters — don't rely on a hover-only value.
Plain slider for approximate values; pair with a text input when an exact value is needed.
A range slider with two handles is an optional min–max variant.

Label

View docs

Accessible label for form controls.

Display name

Usage

Always pair a label with its control.
Mark required fields with * — or, if most are required, mark the optional ones instead.
State the required/optional convention once near the top of the form.

Field

View docs

Form field wrapper with label, hint, and error.

Project key

Used as the prefix for issue IDs. Cannot be changed later.

Usage

Groups a label, control, and helper or error text as one unit.
Keeps spacing and error states consistent across the form.
Follow the form's required/optional convention — see Label.

Data display

Surface information visually.

Badge

View docs

A small status indicator or label.

SolidOutlineSubtleSuccessWarningDangerInfo

Usage

Use for status, count, or short metadata.
Not decoration — every badge should carry meaning.
Avoid crowding a row; colour must communicate meaning.

Avatar

View docs

User or entity image with fallback.

ALJDMKOP

Table

View docs

Use Table to scan, compare, sort, and act on multiple records.

		Status
Button	Actions	Stable
Table	Data display	Stable
Dialog	Overlay	Stable

Usage

Make only task-relevant columns sortable, with a consistent affordance.
Show one active sort and its direction; keep other columns neutral or plain.
Reveal bulk actions only after rows are selected.

Behaviour notesSorting, bulk actions, and action placement.

Show sortable affordances only where sorting helps the task.
The active sort must show its direction and set aria-sort.
Non-sortable columns should not show a sort icon.
Bulk actions appear only after row selection.
Table-level actions, search, filter, and settings belong in the table toolbar.
Row actions stay close to the row.

Calendar

View docs

Use Calendar for choosing dates where visual date context helps.

Behaviour notesDate range, month/year navigation, and typed-date input.

Single date, date range, and month/year navigation.
Offer an optional typed-date input for users who already know the date.
Keep typed input and the visible calendar in sync so they never disagree.

Layout

Structure and spacing primitives.

Card

View docs

A container with surface, border, and structured slots.

Card title

A short description of what this card contains.

The body of the card. Cards group related information into a single visual unit.

Separator

View docs

Visual dividing line.

PRIZM 4.0

A DSTA design system.

Docs

Components

Source

Frame

View docs

Constrained content frame with consistent padding.

Constrained frame with max-width and padding

Group

View docs

Horizontal grouping of related controls.

Grouping guidance

Use Group to align related buttons or controls in one row.
Keep spacing consistent.
Allow wrapping/stacking on smaller screens.
Group controls arrangement only; it does not define page-level action placement.
For button order, placement and action behaviour, see Button usage guidance.

Usage

Aligns related controls or buttons in one row.
Does not define page-level action placement.
For action order and placement, see Button usage guidance.

Stack

View docs

Vertical spacing primitive.

Feedback

Inform users of state changes.

Alert

View docs

Inline message block.

Maintenance window

The status feed will pause between 02:00 and 02:30 UTC.

Connection lost

Retrying every 5 seconds.

Usage

Inline or page-level message the user needs to notice.
Stays visible until resolved or dismissed.
Not for notification-panel items.

Toast

View docs

Transient notification.

Usage

Temporary feedback right after an action.
Short and non-blocking.
Not for persistent notifications or notification-panel items.

Progress

View docs

Determinate progress indicator.

30%

65%

92%

Usage

Use for determinate progress — a known percentage or step.
Show the percentage or step text when it helps.
Keep the value visible; don't reveal it only on hover.

Spinner

View docs

Indeterminate loading indicator.

Loading…

Usage

Use for indeterminate loading of unknown duration.
If the percentage is known, use Progress instead.
Add short loading text when the wait isn't instant.

Skeleton

View docs

Loading placeholder.

Empty State

View docs

Placeholder for empty content regions.

No messages

When you receive messages they will appear here.

Navigation

Move between views and pages.

Left Navigation Rail

D Experience local

Expanded by default on desktop; users can collapse to an icon rail. Labels remain available on hover/focus.

D Experience local

Persistent D Experience app navigation for section-level workflows, expanded by default on desktop and collapsible to an icon rail.

Usage

Desktop is expanded by default; users can collapse to an icon rail.
Collapsed rail keeps labels available on hover/focus.
Supports active state, number badges, and dot indicators.

Usage notes

Use when — D Experience app screens need persistent section-level navigation.

Do not use when — public website pages, small embedded tools, modal-only flows, or simple single-page tasks.

Badges — use numbers for actionable counts, dots for attention states, hide 0, badges are not active states.

Responsive — desktop uses expanded/collapsible rail; mobile may use drawer/sheet.

Tabs

View docs

Switch between related views.

Overview panel content.

Usage

Switch between related views in the same context.
Not primary navigation.
Keep labels short; do not hide critical actions in tabs.

Pagination

View docs

Page navigation for long lists.

Command

View docs

Command palette / fuzzy launcher.

↑↓ navigate↵ select

5 results

Link

View docs

Inline hyperlink with PRIZM styling.

Read the getting started guide or browse the component catalog to begin.

Overlay

Floating UI layered above content. Open below and left-aligned to the trigger, never covering it; close on outside click and Escape.

Dialog

View docs

Use Dialog for focused decisions or short tasks.

Usage

Use for a focused decision or short task.
Not for long or complex forms.
Actions bottom-right: Outline/Cancel before Primary; destructive last with a specific label.

Sheet

View docs

Use Sheet for side tasks, filters, details, or mobile drawer content.

Usage

Use for side tasks, filters, details, or a mobile drawer.
Not when the task needs full-page focus.
Keep close and Escape behaviour clear.

Typography

Text-shaped content primitives.

Kbd

View docs

Keyboard shortcut display.

Save⌘S

Code

View docs

Inline and block code.

Use the cn() utility to merge class names.

import { cn } from "@/lib/utils";

const classes = cn("base-class", condition && "conditional-class");

Heading

View docs

Display and section headings.

Display heading

Section heading

Subsection

Text

View docs

Body text primitive.

Default body text at base size.

Muted small text for secondary info.

Semibold emphasis.

Prose

View docs

Long-form content block.

Getting started

PRIZM provides a set of accessible, themeable components for building D Experience interfaces.

Copy components into your project
Apply design tokens via data-zone and data-mode
Customise as needed

Actions

Button

Forms

Input

Textarea

Checkbox

Radio Group

Switch

Select

Combobox

Slider

Label

Field

Data display

Badge

Avatar

Table

Calendar

Layout

Card

Card title

Separator

Frame

Group

Stack

Feedback

Alert

Maintenance window

Connection lost

Toast

Progress

Spinner

Skeleton

Empty State

Navigation

Left Navigation Rail

Tabs

Breadcrumb

Pagination

Navigation Menu

Command

Link

Overlay

Dialog

Sheet

Popover

Tooltip

Menu

Context Menu

Hover Card

Typography

Kbd

Code

Heading

Display heading

Section heading

Subsection

Text

Prose

Getting started