Button
A button triggers an event or action. Switch the Brand control to see accent color changes.
Import
@import url('./components/button.css');
CSS Classes
| Class | Description |
|---|---|
.udc-button-primary | Primary filled button (brand color background) |
.udc-button-secondary | Secondary outlined button (border, no fill) |
.udc-button-ghost | Ghost button (text only, subtle hover) |
Data Attributes
| Attribute | Values | Description |
|---|---|---|
data-size | sm | Small size with reduced padding |
data-leading-icon | — | Indicates a leading icon is present; reduces left padding |
data-trailing-icon | — | Indicates a trailing icon is present; reduces right padding |
data-icon-only | — | Icon-only square button (equal padding, no gap) |
data-btn-color | danger, success, warning, neutral | Override accent color (maps to Figma's Destructive=True for danger) |
aria-selected | true | Selected/active toggle state |
disabled | — | Disabled state |
No changes recorded yet. This component was introduced in the initial release.
Text Input
A text input lets users enter a single line of text. Includes label, optional helper text, character counter, and icon slots.
Import
@import url('./components/text-input.css');
CSS Classes
| Class | Description |
|---|---|
.udc-text-input | Root wrapper (vertical stack) |
.udc-text-input__label | Label text |
.udc-text-input__required | Red dot indicator |
.udc-text-input__field | The bordered input container |
.udc-text-input__leading-icon | Leading icon slot |
.udc-text-input__trailing-btn | Trailing action button |
.udc-text-input__helper | Helper text row |
.udc-text-input__counter | Character counter |
Data Attributes
| Attribute | Values | Description |
|---|---|---|
data-state | error | Error state styling |
disabled | — | On the <input> element |
No changes recorded yet.
Checkbox
A checkbox lets users select one or more options from a set.
Import
@import url('./components/checkbox.css');CSS Classes
| Class | Description |
|---|---|
.udc-checkbox | Root label wrapper |
.udc-checkbox__control | Visual checkbox indicator |
.udc-checkbox__label | Label text |
.udc-checkbox__required | Required dot indicator |
No changes recorded yet.
Radio
A radio button lets users select exactly one option from a set.
Import
@import url('./components/radio.css');CSS Classes
| Class | Description |
|---|---|
.udc-radio-group | Vertical stack wrapper |
.udc-radio-group__legend | Group label |
.udc-radio | Individual radio label |
.udc-radio__control | Visual circle indicator |
.udc-radio__label | Label text |
No changes recorded yet.
Dropdown
A dropdown lets users select a single value from a list of options. It combines a trigger button with a floating option list.
Import
@import url('./components/dropdown.css');
CSS Classes
| Class | Description |
|---|---|
.udc-dropdown | Root wrapper — positioned container |
.udc-dropdown__label | Label text above the trigger |
.udc-dropdown__required | Red required dot |
.udc-dropdown__trigger | Clickable trigger box |
.udc-dropdown__leading-icon | Optional leading icon slot |
.udc-dropdown__value | Selected value display (add data-placeholder for placeholder style) |
.udc-dropdown__chevron | Trailing arrow icon (auto-rotates when open) |
.udc-dropdown__helper | Helper text row below trigger |
.udc-dropdown__counter | Character/selection counter in helper row |
.udc-dropdown__list | Option list container (shown when data-open="true") |
.udc-dropdown__item | Individual selectable option |
Data Attributes
| Attribute | Element | Description |
|---|---|---|
data-state="error" | .udc-dropdown | Error visual treatment |
data-open="true" | .udc-dropdown | Shows list, rotates chevron |
aria-disabled="true" | .udc-dropdown__trigger | Disabled state |
data-placeholder | .udc-dropdown__value | Muted placeholder style |
No changes recorded yet.
Badge
A badge is a visual indicator for categorization, status, or labels.
Import
@import url('./components/badge.css');Data Attributes
| Attribute | Values | Description |
|---|---|---|
data-variant | secondary, success, error, warning | Color variant (default is info/blue) |
data-prominent | false | Subtle/tinted style |
data-size | sm | Compact size |
No changes recorded yet.
Divider
A horizontal divider separates content into clear groups.
Import
@import url('./components/divider.css');| Attribute | Values |
|---|---|
data-padding | md, lg, xl (default: sm) |
No changes recorded yet.
Icon Wrapper
An icon wrapper constrains an icon to a fixed size with consistent inner padding.
Import
@import url('./components/icon-wrapper.css');| Attribute | Values |
|---|---|
data-size | 16, 20, 24 (default), 32, 48, 64 |
No changes recorded yet.
Spacer
A spacer adds consistent whitespace between elements using the spacing scale.
Import
@import url('./components/spacer.css');| Attribute | Values |
|---|---|
data-size | 050, 075, 100, 150, 200, 300, 400, 600 |
No changes recorded yet.
Breadcrumb
A breadcrumb shows the user's location in a page hierarchy.
Import
@import url('./components/breadcrumb.css');| Attribute | Description |
|---|---|
data-frameless | Removes the pill container |
aria-current="page" | Marks the current page (bold, non-interactive) |
No changes recorded yet.
Tabs
Horizontal tabs let users switch between related views in a single content area.
Import
@import url('./components/tab-horizontal.css');| Class / Attribute | Description |
|---|---|
.udc-tabs | Tab bar container |
.udc-tab | Individual tab button |
data-size="sm" | Compact vertical padding |
aria-selected="true" | Active tab |
disabled | Disabled tab |
No changes recorded yet.
Nav Header
A top-level application header bar with logo, bento dropdown for app switching, search, and user action buttons.
Import
@import url('./components/nav-header.css');
@import url('./components/nav-vertical.css'); /* for .udc-nav-button in bento list */
| Class / Attribute | Description |
|---|---|
.udc-nav-header | Top header bar (3-column grid) |
.udc-nav-header__left / __center / __right | Grid sections |
.udc-nav-logo | Logo container |
.udc-nav-bento-wrapper | Positioning context for bento dropdown |
.udc-nav-bento-button | Pill trigger for the bento dropdown |
.udc-nav-bento | Dropdown panel (data-open="true" to show) |
.udc-nav-bento__tiles | Optional shortcut tile row |
.udc-nav-bento__list | Main list inside bento |
.udc-nav-tile | Compact tile shortcut |
.udc-nav-search | Search bar |
.udc-nav-mywork | "My Work" action button |
.udc-nav-account | Account actions group |
aria-expanded | Bento button open state |
No changes recorded yet.
Nav Vertical
A vertical sidebar navigation list with icon + label items. Supports leading-icon and text-only variants.
Import
@import url('./components/nav-vertical.css');
| Class / Attribute | Description |
|---|---|
.udc-nav-vertical | Sidebar container |
.udc-nav-button | Individual nav item (icon + label) |
.udc-nav-button__label | Label text inside nav button |
.udc-nav-button__trailing | Optional trailing content (e.g. external link icon) |
.udc-nav-button-vertical | Compact rail nav item (icon over label) |
data-leading-icons="false" | Text-only mode (no icons) |
aria-selected="true" | Active/selected nav item |
No changes recorded yet.
Data Table
A data grid with sortable headers, row selection via checkboxes, cell types (text, badge, action button), alignment helpers, and error highlighting.
Import
@import url('./components/data-table.css');
| Class / Attribute | Description |
|---|---|
.udc-data-table | Root wrapper (handles overflow scroll) |
.udc-dt-check | Checkbox column (th or td) |
.udc-dt-sort | Sort indicator inside <th>; set data-dir="asc|desc" |
.udc-dt-filter | Filter icon inside <th> |
.udc-dt-action | Action button column (narrow, centered) |
.udc-dt-align-center | Center-align a column |
.udc-dt-align-right | Right-align a column |
.udc-dt-prominent | Bold/medium text within a cell |
.udc-dt-cell-icon | Inline flex for icon + text in a cell |
data-striped="true" | Alternating row backgrounds (on wrapper) |
data-highlight="error" | Error background on a row or cell |
aria-selected="true" | Selected row highlight |
No changes recorded yet.
Tile
A selectable card with a label, body text, and optional trailing chevron. Supports default, hover, selected, focused, and disabled states.
Import
@import url('./components/tile.css');
| Class / Attribute | Description |
|---|---|
.udc-tile | Root tile container |
.udc-tile__content | Content column (label + body rows) |
.udc-tile__label | Bold label text |
.udc-tile__required | Red required dot after label |
.udc-tile__body | Body text row (repeat for multiple lines) |
.udc-tile__chevron | Trailing chevron icon (optional) |
aria-selected="true" | Selected state |
aria-disabled="true" | Disabled state |
No changes recorded yet.
List
A vertical list of selectable items with optional leading and trailing icons. Supports default, hover, active, selected, and focused states.
Import
@import url('./components/list.css');
| Class / Attribute | Description |
|---|---|
.udc-list | List wrapper container |
.udc-list-item | Individual list row |
.udc-list-item__label | Item text label |
.udc-list-item__leading-icon | Optional icon before the label |
.udc-list-item__trailing-icon | Optional icon after the label |
aria-selected="true" | Selected item state |
No changes recorded yet.
Notification
Inline status banners for info, success, error, and warning messages. Supports subtle, prominent, and inline styles.
Import
@import url('./components/notification.css');
| Class / Attribute | Description |
|---|---|
.udc-notification | Root container |
.udc-notification__icon | Leading status icon |
.udc-notification__text | Message text |
.udc-notification__close | Optional dismiss button |
data-variant="info|success|error|warning" | Color variant (default: info) |
data-prominent="true" | Filled/bold background with inverse text |
data-inline="true" | No background or padding |
No changes recorded yet.
Dialog
A modal overlay with a title bar, scrollable content area, and action footer. Supports 1–4 content slots.
Import
@import url('./components/dialog.css');
| Class / Attribute | Description |
|---|---|
.udc-dialog-backdrop | Full-screen overlay; set data-open="true" to show |
.udc-dialog | Dialog container (centered card) |
.udc-dialog__header | Title bar with close button |
.udc-dialog__title | Dialog heading text |
.udc-dialog__close | Close button in header |
.udc-dialog__body | Scrollable content area |
.udc-dialog__footer | Action buttons, right-aligned |
data-open="true|false" | Toggle dialog visibility (on backdrop) |
No changes recorded yet.
Chip
Compact elements for filtering, input tags, and dropdown triggers. Supports selected state, leading/trailing icons, and four variants.
Import
@import url('./components/chip.css');
| Class / Attribute | Description |
|---|---|
.udc-chip | Root chip button |
.udc-chip__label | Text label |
.udc-chip__leading-icon | Icon before label (e.g. check) |
.udc-chip__trailing-icon | Icon after label (close or chevron) |
data-variant="filter|input|dropdown" | Chip variant (default if omitted) |
aria-selected="true" | Selected/active state |
No changes recorded yet.
Search
A search input with a leading search icon and a clear button that appears when the field has a value. Supports default, hover, focused, and error states.
Import
@import url('./components/search.css');
| Class / Attribute | Description |
|---|---|
.udc-search | Root wrapper |
.udc-search__field | Field container (border, bg) |
.udc-search__icon | Leading search icon |
.udc-search__clear | Clear button (auto-shown when input has value) |
data-state="error" | Error focus ring (red) |
data-has-value="true" | Set by JS to show/hide clear button |
No changes recorded yet.
Tooltip
A lightweight text popover that appears on hover or focus. CSS-only — no JavaScript required. Supports top, bottom, left, and right positioning.
Import
@import url('./components/tooltip.css');
| Class / Attribute | Description |
|---|---|
.udc-tooltip-wrapper | Wrapper around trigger + tooltip |
.udc-tooltip | Tooltip bubble (hidden by default) |
role="tooltip" | ARIA role for screen readers |
data-position="top|bottom|left|right" | Tooltip placement (default: top) |
No changes recorded yet.
Link
A link navigates users to another page, route, resource, or external destination.
Vanilla HTML
<a class="udc-link" href="/properties">Properties</a>
<a class="udc-link" href="/settings" aria-current="page">Settings</a>
<a class="udc-link" href="https://example.com" target="_blank" rel="noopener noreferrer" data-new-window>
External <span class="material-symbols-outlined" aria-hidden="true">open_in_new</span>
</a>No changes recorded yet.
Label
A label identifies an input, selection control, or form field and can include required-state affordances.
Vanilla HTML
<label class="udc-label" for="full-name" data-required="true">
Full name <span class="udc-label__required" aria-hidden="true"></span>
</label>No changes recorded yet.
Text Area
A text area lets users enter multi-line freeform text.
Vanilla HTML
<div class="udc-text-area">
<label class="udc-label" for="notes">Notes</label>
<div class="udc-text-area__field">
<textarea id="notes" placeholder="Add notes..."></textarea>
</div>
<div class="udc-text-area__helper"><span>Optional internal note</span><span>0/250</span></div>
</div>No changes recorded yet.
Combobox
A combobox combines text entry with a selectable list of suggestions.
Deferred
No reference HTML is generated yet because the Figma page does not contain a component set to inspect. This prevents the docs from inventing API or markup before design is ready.
No changes recorded yet.
Date Picker
A date picker helps users enter or select a calendar date.
Deferred
No reference HTML is generated yet because the Figma page does not contain a component set to inspect. This prevents the docs from inventing API or markup before design is ready.
No changes recorded yet.
Toggle
A toggle switches a setting on or off and reflects the current state immediately.
Vanilla HTML
<button class="udc-toggle" role="switch" aria-checked="true">
<span class="udc-toggle__control"><span class="udc-toggle__thumb"></span></span>
<span class="udc-toggle__label">Email notifications</span>
</button>No changes recorded yet.
Pagination
Pagination lets users move through pages of results or records.
Vanilla HTML
<nav class="udc-pagination" aria-label="Pagination">
<div class="udc-pagination__pages">
<button class="udc-pagination__button" aria-label="Previous page">...</button>
<button class="udc-pagination__button" aria-current="page">1</button>
<button class="udc-pagination__button">2</button>
</div>
<div class="udc-pagination__meta"><span>Rows per page</span><span>50</span><span>1-50 / 100</span></div>
</nav>No changes recorded yet.
Data View
A data view presents collections of records in non-table layouts such as cards or compact summaries.
Deferred
No reference HTML is generated yet because the Figma page does not contain a component set to inspect. This prevents the docs from inventing API or markup before design is ready.
No changes recorded yet.