Foundations

Identity primitives — the elements every screen leans on.

Icons

Font Awesome 7 Pro glyphs, referenced directly — this kit has no Icon wrapper.

Sizes

sm 16

default 20

lg 32

Regular vs Solid

bell

calendar

user

gear

trash

Reference glyphs

square-list

buildings

wrench

chart-line-up

square-sliders

boxes

help

bell

calendar

clock

user

settings

plus

minus

check

filter

download

edit

ellipsis

info

image

columns

sort

caret-down

external-link

sparkle

alert-circle

warning

trash

Example

import { faBell } from "@fortawesome/pro-regular-svg-icons";
import { faBellSolid } from "@fortawesome/pro-solid-svg-icons";

<FontAwesomeIcon icon={faBell} style={{ fontSize: 20 }} />

Props

icon:IconDefinition

Glyph imported from @fortawesome/pro-regular-svg-icons (outline) or @fortawesome/pro-solid-svg-icons (filled). Components that take an icon (Button, IconButton, …) accept the same IconDefinition.

style={{ fontSize }}:number

Glyph size in px, set inline (this reference shows 16 / 20 / 32).

Logo

FMX brand mark — size × color variants.

default · primary

default · neutral

lg · primary

lg · neutral

Example

<Logo size="lg" color="primary" />

Props

size:"default" | "lg"= "default"

default = 20px; lg = 32px (exact Figma mark sizes).

color:"primary" | "neutral"= "primary"

primary uses brand blue; neutral uses on-surface.

label:string

Accessible label; omit to render decorative (aria-hidden).

Avatar

Circular avatar with sm (24×24) or md (40×40) size. Initials as fallback.

sm · initials

sm · forced placeholder

sm · single char

sm · empty placeholder

md · initials

md · forced placeholder

md · single char

md · empty placeholder

Example

<Avatar size="md" initials="AG" />

Props

size:"sm" | "md"= "md"

sm is 24×24, md is 40×40.

src:string

Image URL. Falls back to initials placeholder when omitted.

initials:string= "?"

Text shown when image is missing or showPlaceholder is forced.

showPlaceholder:boolean= false

Force initials placeholder even when src is provided.

alt:string

Accessible alt text for the image / aria-label for initials.

Buttons & actions

Button variants, states, and groupings.

Button

default/outline/ghost × default/sm × enabled/disabled/loading + leading icon.

default · enabled

default · disabled

default · loading

outline · enabled

outline · disabled

outline · loading

ghost · enabled

ghost · disabled

ghost · loading

default · sm

outline · sm

default · leading icon

outline · leading icon

ghost · leading icon

Example

<Button variant="outline" icon={faPlus}>
  Add item
</Button>

Props

variant:"default" | "outline" | "ghost"= "default"

Visual treatment. default=primary fill, outline=bordered, ghost=flush.

size:"default" | "sm"= "default"

40px min-height (default) or 36px (sm).

icon:IconDefinition

Leading icon glyph.

loading:boolean= false

Replaces label with a spinner and disables the button.

disabled:boolean= false

Standard disabled state.

tooltip:ReactNode | false

Tooltip text on hover/focus. false opts out.

buttonType:"button" | "submit" | "reset"= "button"

Native form button type.

Icon Button

outline/ghost × default/sm. Optional notification dot. Tooltip from aria-label.

outline · default

ghost · default

outline · sm

ghost · sm

disabled

with notification

tooltip below

Example

<IconButton icon={faBell} aria-label="Notifications" />

Props

icon:IconDefinition

Glyph to render (required).

type:"outline" | "ghost"= "outline"

Bordered or flush.

size:"default" | "sm"= "default"

40px or 36px square tap target.

loading:boolean= false

Show a spinner; disables the button.

showNotification:boolean= false

Overlay a red dot at the top-right corner.

tooltipLocation:"above" | "below" | "left" | "right"= "above"

Tooltip placement.

Link Button

Underlined link-style button. Color is on-surface (not primary blue); a soft gray pill appears on hover.

enabled

with leading icon

disabled

Example

<LinkButton icon={faArrowUpRightFromSquare}>Open</LinkButton>

Props

icon:IconDefinition

Optional leading icon glyph.

loading:boolean= false

Show spinner; disables button.

disabled:boolean= false

Disabled state — muted opacity.

buttonType:"button" | "submit" | "reset"= "button"

Native button type.

Button Group

Joins outline buttons / icon buttons into a segmented control. Horizontal or vertical.

horizontal · text buttons

horizontal · icon buttons

mixed text + icon

vertical

Example

<ButtonGroup>
  <Button variant="outline">Day</Button>
  <Button variant="outline">Week</Button>
</ButtonGroup>

Props

orientation:"horizontal" | "vertical"= "horizontal"

Lay children in a row or column.

children:ReactNode

Outline Buttons or IconButtons to join.

FAB

Floating Action Button — extended (icon + label) or icon-only variants.

extended (with label)

icon only

custom label + icon

disabled

Example

<FAB label="Ask Iris" floating />

Props

showLabel:boolean= true

Show the text label beside the icon (extended pill). Icon-only when false.

label:string= "Ask Iris"

Label text for the extended FAB.

icon:IconDefinition= faSparkles

Leading glyph.

floating:boolean= false

Renders inside a fixed bottom-lg right-lg z-50 wrapper — the canonical corner placement. Don't pass `fixed` via className (the internal `relative` wins); use this prop or your own wrapper. (Not demoed here — it would pin to this page's corner.)

Display

Status indicators, rules, and notification dots.

Badge

solid/soft/surface/outline × default/sm + leading icon. Semantic colors apply to solid and soft.

solid · default

Open

soft · default

In progress

surface · default

Pending

outline · default

Draft

solid · sm

Open

soft · sm

In progress

surface · sm

Pending

outline · sm

Draft

soft · leading icon

Approved

solid · leading icon

In review

outline · leading icon

Overdue

surface · leading icon

Attention

solid · success

Approved

solid · primary

Scheduled

solid · accent

On hold

solid · error

Declined

solid · warning

Expiring

soft · success

Approved

soft · primary

Scheduled

soft · accent

On hold

soft · error

Declined

soft · warning

Expiring

Example

<Badge type="solid" color="success">Approved</Badge>

Props

type:"solid" | "soft" | "surface" | "outline"= "solid"

Fill/border treatment. All are rounded-full pills.

size:"default" | "sm"= "default"

Label size and padding.

Semantic status color. Applies to solid and soft; surface/outline stay neutral.

icon:IconDefinition

Optional leading glyph.

Chip

Compact interactive token. Leading icon or avatar; optional remove button.

plain

Conference Room A

with leading icon

Active

with avatar

AGAshley Green

removable

Conference Room A

removable with icon

Active

disabled

Disabled chip

Example

<Chip icon={faFilter} removable onRemove={() => setValue(null)}>
  Active
</Chip>

Props

icon:IconDefinition

Leading icon. Mutually exclusive with avatarSrc/avatarInitials.

avatarInitials:string

Leading avatar initials.

removable:boolean= false

Show trailing remove (×) button.

onRemove:() => void

Called when the remove button is clicked.

disabled:boolean= false

Disabled state — reduced opacity.

Divider

1px border-muted rule. Horizontal fills width; vertical fills parent height.

horizontal

vertical

Example

<Divider direction="horizontal" />

Props

direction:"horizontal" | "vertical"= "horizontal"

Orientation of the rule. Vertical needs a parent with height.

Notification

Dot (sm) or count bubble (lg). high=orange fill, low=primary blue.

sm · high

sm · low

lg · count · high

lg · count · low

lg · overflow

99+

lg · zero

Example

<Notification count={3} priority="high" />

Props

size:"sm" | "lg"= "lg"

sm is a bare dot; lg shows the count.

priority:"high" | "low"= "high"

high=orange fill (#ca3500), low=primary blue (#1734a1).

count:number | string

Count rendered by lg badge (e.g. "5", "99+").

Overlays

Hover and focus surfaces that float above the page.

Tooltip

Plain hover/focus tooltip. Wraps any trigger; placement controlled by location prop.

above (default)

below

left

right

wrapping arbitrary element

Hover me

icon button with tooltip

Example

<Tooltip label="Help text" location="above">
  <button>…</button>
</Tooltip>

Props

label:ReactNode

Tooltip body.

location:"above" | "below" | "left" | "right"= "above"

Placement relative to the trigger.

children:ReactNode

Trigger element.

Dropdown Menu

Stacked menu items. option / groupName / divider types; leading icons and avatars.

options only

with leading icons

with leading avatars

grouped with divider + trailing text

disabled option

InputGroup focusedMenu

Example

<DropdownMenu>
  <DropdownMenuItem label="Edit" leadingIcon={faPencil} />
  <DropdownMenuItem label="Delete" leadingIcon={faTrashCan} />
</DropdownMenu>

Props

type:"option" | "groupName" | "divider"= "option"

option = interactive; groupName = section heading; divider = horizontal rule.

label:ReactNode

Primary label for option type.

groupName:ReactNode

Heading text for groupName type.

text:ReactNode

Trailing text (e.g. keyboard shortcut).

leadingIcon:IconDefinition

Optional icon left of the label.

leadingAvatar:{ initials?, src?, alt? }

Optional avatar left of the label.

disabled:boolean= false

Non-interactive, muted option.

Sheet

Side panel with header (title + description + close), scrollable body, optional footer.

right panel · title + description

left panel · no footer

Example

<Sheet title="Filters" onClose={close}>
  <FilterForm />
</Sheet>

Props

title:string

Panel title rendered as text-heading-2.

description:string

Optional sub-title / description line below title.

side:"right" | "left"= "right"

Which edge the panel attaches to.

showCloseButton:boolean= true

Render the × close IconButton in the header.

onClose:() => void

Called when the close button is clicked.

footer:ReactNode

Footer content (e.g. primary + cancel buttons).

children:ReactNode

Body content — rendered in the scrollable middle section.

Form controls

Inputs designers reach for when capturing data.

Input

Pseudo-class states (hovered, focused) appear on interaction.

enabled (empty)

populated

error

disabled

Example

<Input placeholder="Your name" />

Props

error:boolean= false

Renders the error border treatment.

disabled:boolean= false

Standard disabled state.

placeholder:string

Native placeholder text.

value / defaultValue:string

Controlled or uncontrolled value.

Input Group

Input with leading/trailing icon or text adornment. Container picks up focus styling.

enabled (empty)

populated

leading icon

trailing icon

leading text

trailing text

leading + trailing

$USD

error

disabled

Example

<InputGroup
  leadingText="$"
  placeholder="0.00"
  trailingText="USD"
/>

Props

leadingIcon:IconDefinition

Icon anchored to the left.

leadingText:string

Text adornment on the left (e.g. "$").

trailingIcon:IconDefinition

Icon anchored to the right.

trailingText:string

Text adornment on the right.

menu:ReactNode

Attached dropdown rendered below the trigger.

error:boolean= false

Error border treatment.

disabled:boolean= false

Disabled state.

Text Area

Multi-line input. Resize handle appears bottom-right; disabled removes it.

enabled (empty)

populated

error

disabled

Example

<TextArea placeholder="What's wrong?" />

Props

error:boolean= false

Error border treatment.

disabled:boolean= false

Disabled state. Removes the resize handle.

placeholder:string

Native placeholder text.

value / defaultValue:string

Controlled or uncontrolled value.

Select

Single-select dropdown — read-only trigger, no typing (use Combobox for that). Options can carry icon or avatar.

enabled (empty)

populated

error

disabled

options with icon

options with avatar

Example

<Select
  options={[{ value: "lobby", label: "Lobby" }]}
  defaultValue="lobby"
/>

Props

options:SelectOption[]

{ value, label, icon?, initials? } items. icon/initials render as a leading adornment in the option row and the populated trigger.

value / defaultValue:string | null

Controlled or uncontrolled selection.

onChange:(value: string) => void

Fires on selection.

placeholder:string= "Select something"

Shown when nothing is selected.

error:boolean= false

Error border treatment.

disabled:boolean= false

Disabled state.

Combobox

Single- and multi-select. Click to open; type to filter. Options can carry icon or avatar. The listbox is viewport-aware — it caps its height to the available space and flips above the field near the bottom of the window.

single · enabled

multi · enabled

single · error

single · disabled

options with leading icons

options with avatars

trigger · leading icon

multi · leading icon

single · clearable (× once a value is set)

Example

<Combobox
  value={value}
  onChange={setValue}
  options={ROOM_OPTIONS}
  placeholder="Select a room"
/>

Props

options:ComboboxOption[]

Items. Each has `{ value, label, group?, icon?, initials? }`.

value:string | string[] | null

Selected value. String for single, string[] for multi, null for empty.

onChange:(next) => void

Fires on selection change.

multiple:boolean= false

Allow multiple selections (renders chips).

clearable:boolean= false

Show a clear (×) on single-select once a value is set. Multi-select always has clear-all.

placeholder:string

Trigger placeholder when empty.

leadingIcon:IconDefinition

Icon anchored to the left of the trigger.

error:boolean= false

Error border treatment.

disabled:boolean= false

Disabled state.

Checkbox

state (default/error/disabled) × isChecked (yes/no) × isGrouped (yes/no) = 12 variants. Click any to toggle.

Example

<Checkbox
  label="I agree"
  description="Required to proceed"
/>

Props

checked:boolean

Controlled checked state. Omit for uncontrolled (auto-toggles).

defaultChecked:boolean= false

Initial value when uncontrolled.

onChange:(e) => void

Native change handler. Required for controlled use.

error:boolean= false

Renders the red error treatment.

disabled:boolean= false

Disabled state.

grouped:boolean= false

Marks membership in a checkbox group.

label:ReactNode

Primary label text.

description:ReactNode

Optional helper text below the label.

Form composition

Higher-order wrappers that arrange leaf components into real screens.

Field

Composes label + content + description (and error). Vertical or horizontal layout.

vertical · with description

Building

Choose the building this request applies to.

vertical · with error

Building

Building is required.

with descriptionTop

Building

Pick the building this request applies to.

contentLayout = horizontal

Date range

fieldLayout = horizontal · labels share a 200px column

Building

Primary point of contact

Example

<Field>
  <Field.Label required>Building</Field.Label>
  <Field.Content>
    <Combobox … />
  </Field.Content>
</Field>

Props

fieldLayout:"default" | "horizontal"= "default"

default stacks label / content; horizontal puts label beside content.

contentLayout:"default" | "horizontal"= "default"

Layout inside Field.Content.

hasError:boolean= false

Toggles visibility of Field.Error.

(slots):Field.Label / .DescriptionTop / .Content / .Description / .Error

Composition sub-components.

Field Set

Groups related Fields with a heading and optional description.

grouped fields

Location

Where is the issue you're reporting?

Building

Room or area

Optional — helps the technician find it faster.

Example

<FieldSet>
  <FieldSet.Heading>Location</FieldSet.Heading>
  <FieldSet.Fields>
    <Field>…</Field>
  </FieldSet.Fields>
</FieldSet>

Props

(slots):FieldSet.Heading / .Description / .Fields

Composition sub-components. Heading is heading-2; Fields is the vertical stack.

Form

Full prototype-grade form composed of Form + FieldSet + Field + leaf components.

maintenance request

Example

<Form onSubmit={handleSubmit}>
  <Form.Heading>Title</Form.Heading>
  <Form.Content>…</Form.Content>
  <Form.Footer>…</Form.Footer>
</Form>

Props

onSubmit:(e) => void

Standard form submit handler.

(slots):Form.Heading / .Content / .Footer

Composition sub-components.

Feedback

Error and status banners.

Alert

Callout banner in five type variants — tinted container + border with a matching leading icon; text stays on-surface.

general (default)

Scheduled maintenance

The portal will be unavailable Sunday from 2–4 AM.

success

Request submitted

You'll get an email when it's approved.

info

New in this release

Requests can now be duplicated from the row menu.

warning

Session expiring

Your session will expire in 5 minutes.

error

Couldn't save changes

Check the highlighted fields and try again.

description only

Access denied.

Example

<Alert type="error" title="Couldn't save changes">
  Check the highlighted fields.
</Alert>

Props

type:"general" | "success" | "info" | "warning" | "error"= "general"

Variant — drives the container fill, border, and leading icon.

title:ReactNode= "Title"

Bold heading; hidden when showTitle is false.

showTitle:boolean= true

Toggle the title line.

children:ReactNode

Description / body content.

Chrome

Page-level wrappers — navbar, sidebar, heading bars, breadcrumbs.

Navbar

Top-level org/user header. Full-width chrome component.

org / user header

Acme FacilitiesWelcome back

with contextual breadcrumb (sub-page)

Acme FacilitiesWelcome back

Example

<Navbar
  orgName={session.hostname}
  orgInitials="AF"
  userInitials="MG"
  onMenuToggle={toggleSidebar}
/>

Props

orgName:ReactNode

Organization name. Bind to session hostname — do not transcribe literal.

welcomeMessage:ReactNode

Optional sub-label (e.g. "Welcome back"). Bind to session.

orgInitials / orgSrc:string

Org avatar initials and/or image source.

userInitials / userSrc:string

User avatar initials and/or image source.

onMenuToggle:() => void

Sidebar-toggle handler. Omit to hide the hamburger.

iconButtons:ReactNode

Slot for the right-aligned icon button stack.

breadcrumb:ReactNode

Contextual slot after the org cluster (e.g. a <Breadcrumb> on sub-pages). In-flow — shrinks with the org name.

Sidebar

Vertical nav rail with item/subItem/selected states. Full-height panel.

nav rail

Example

<Sidebar header={<Logo />}>
  <SidebarMenuItem icon={faBars} label="Dashboard" selected />
  <SidebarMenuItem icon={faCalendar} label="Requests" />
</Sidebar>

Props

header:ReactNode

Brand slot rendered at the top (Logo, wordmark).

footer:ReactNode

Footer slot rendered at the bottom.

children:ReactNode

Nav items — SidebarMenuItem elements.

Example

<SidebarMenuItem icon={faBell} label="Notifications" badge={<Notification count={3} />} />

Props

type:"item" | "subItem"= "item"

item = icon + label row; subItem = indented label with vertical divider.

label:string

Display label (required).

icon:IconDefinition

Leading icon — only rendered for type=item.

selected:boolean= false

Applies primary/10 background and primary text/icon.

disabled:boolean= false

Non-interactive, muted.

badge:ReactNode

Trailing badge/notification slot.

Breadcrumb

Horizontally-arranged crumbs separated by caret-right. Last crumb is the current page.

two levels

three levels

single level (no links)

four levels

Example

<Breadcrumb
  items={[
    { label: "Dashboard", href: "/" },
    { label: "Requests", current: true },
  ]}
/>

Props

items:BreadcrumbCrumb[]

Array of { label, href?, current? }. Last item defaults to current.

Toolbar

Search input + optional leading filter actions + trailing table-level action buttons.

search + actions

Example

<Toolbar searchPlaceholder="Search…">
  <IconButton icon={faDownload} type="ghost" aria-label="Export" />
</Toolbar>

Props

searchPlaceholder:string= "Search..."

Placeholder text for the search input.

searchValue:string

Controlled search value.

onSearchChange:(value: string) => void

Called when the search value changes.

leadingActions:ReactNode

Renders immediately after search — typically outline buttons.

children:ReactNode

Trailing actions slot — pushed to the far right.

Page Heading

Per-page title bar — optional leading icon, badge, description, icon-button cluster, action buttons, and a tabs row.

title only

Maintenance requests

icon · badge · description · icon buttons · actions

Request #4287

In progress

Reported 2 days ago · Lobby HVAC

with tabs

Building 4

Example

<PageHeading
  icon={faWrench}
  title="Request #4287"
  badge={<Badge type="surface">In progress</Badge>}
  buttons={<Button>Save</Button>}
  tabs={
    <>
      <PageHeading.Tab active>Overview</PageHeading.Tab>
      <PageHeading.Tab>Requests</PageHeading.Tab>
    </>
  }
/>

Props

title:string

Page title rendered as text-heading-1.

icon:IconDefinition

Optional 24px decorative leading icon (icon/default muted).

badge:ReactNode

Optional badge shown beside the title (e.g. a status <Badge>).

description:string

Optional sub-line below the title row.

iconButtons:ReactNode

Icon-button cluster after the title/badge (e.g. ghost IconButtons).

buttons:ReactNode

Right-aligned action buttons (e.g. outline + default Button).

tabs:ReactNode

Tabs row below the heading — pass <PageHeading.Tab> children.

Section Heading

In-page section header with title, optional description, and trailing actions.

section header

Location details

Assigned techniciansTechnicians currently assigned to this request.

Example

<SectionHeading
  title="Location details"
  description="Where the issue was reported."
/>

Props

title:string

Section heading label (text-heading-2).

description:string

Optional description shown below the title.

actions:ReactNode

Trailing actions slot (e.g. ghost IconButtons or LinkButtons).

Scheduling

Date and time selection.

Calendar

Single-month picker. Click days to select; chevrons step months. Today is highlighted.

empty selection

January 2026

with selection

January 2026

Example

<Calendar
  value={value}
  onChange={setValue}
  month={month}
  onMonthChange={setMonth}
  highlighted={TODAY}
/>

Props

value:Date | null

Currently selected date. null = no selection.

onChange:(date: Date) => void

Fires when a day is clicked.

month:Date

Month currently visible (day component is ignored).

onMonthChange:(date: Date) => void

Fires when prev/next chevrons are clicked.

highlighted:Date

Date treated as today. Pass a fixed Date from the parent to avoid SSR mismatch.

Date Picker

Field + popover Calendar. Values are naive YYYY-MM-DD strings (the form-state shape). The popover flips above the field when there isn't room below.

empty

with value

error

disabled

Example

<DatePicker value={date} onChange={setDate} />

Props

value:string | null

Selected date as "YYYY-MM-DD". Omit for uncontrolled.

onChange:(value: string) => void

Fires when a day is picked (popover closes).

placeholder:string= "Select a date"

Shown when no value is set.

error:boolean= false

Error border treatment.

disabled:boolean= false

Disabled state.

Time Picker

Field + listbox of times at a fixed interval. Values are naive 24h HH:mm strings; labels display 12-hour. No Figma master yet — composed from the kit's field + listbox patterns.

empty · 30 min steps

with value

15 min steps

error

Example

<TimePicker value={time} onChange={setTime} step={15} />

Props

value:string | null

Selected time as 24h "HH:mm". Omit for uncontrolled.

onChange:(value: string) => void

Fires when a time is picked (listbox closes).

step:number= 30

Minutes between listed times.

placeholder:string= "Select a time"

Shown when no value is set.

error:boolean= false

Error border treatment.

disabled:boolean= false

Disabled state.

Data display

Surfaces that present tabular and list information.

Data Table

Toolbar + sortable, selectable table + pagination. Cells are ReactNode — Badge/Avatar/FontAwesomeIcon compose freely.

table + toolbar + pagination

Name	Assignee	Priority	Status	Updated
Lobby HVAC	AGAshley Green	Medium	Finalized	2h ago
Warehouse door	OBOllie Brooks	High	In progress	1d ago
Loading dock light	MGMitch Galehouse	Low	Pending	3d ago

Showing 1–3 of 3

rows per page

fillHeight · height-constrained card, rows scroll internally

Name	Building	Updated
Asset 1	Building A	1d ago
Asset 2	Building B	2d ago
Asset 3	Building C	3d ago
Asset 4	Building D	4d ago
Asset 5	Building A	5d ago
Asset 6	Building B	6d ago
Asset 7	Building C	7d ago
Asset 8	Building D	8d ago
Asset 9	Building A	9d ago
Asset 10	Building B	10d ago
Asset 11	Building C	11d ago
Asset 12	Building D	12d ago
Asset 13	Building A	13d ago
Asset 14	Building B	14d ago
Asset 15	Building C	15d ago
Asset 16	Building D	16d ago
Asset 17	Building A	17d ago
Asset 18	Building B	18d ago
Asset 19	Building C	19d ago
Asset 20	Building D	20d ago
Asset 21	Building A	21d ago
Asset 22	Building B	22d ago
Asset 23	Building C	23d ago
Asset 24	Building D	24d ago
Asset 25	Building A	25d ago

Showing 1–25 of 25

rows per page

Example

<DataTable
  selectable
  columns={[{ key: "name", header: "Name", sortable: true }]}
  rows={[{ id: "1", cells: { name: "Lobby" } }]}
/>

Props

columns:DataTableColumn[]

{ key, header, align?, sortable? } definitions.

rows:DataTableRow[]

{ id, cells, muted? } — cells keyed by column, each a ReactNode.

selectable:boolean= false

Leading select-all / per-row checkboxes.

rowActions:(rowId: string) => void

Trailing … overflow per row. Called with row id on activation.

sortKey / sortDirection:string / "asc" | "desc"

Presentational sort indicator.

selectedIds / onSelectionChange:string[] / fn

Controlled selection.

footer / stickyFooter:ReactNode / boolean= — / false

Footer slot (e.g. <DataTablePagination>). stickyFooter pins it to the scroll-area bottom while a long page-scrolled table scrolls; ignored when fillHeight is set.

fillHeight:boolean= false

Card fills a height-constrained flex parent; rows scroll inside the card under a sticky header and the footer is always visible. Pass className="flex-1" and own the page's bottom gap. Overrides stickyFooter.

Item / Item Set

List-row primitive (Item) grouped into a bordered card (ItemSet), with an optional section heading above it. Vertical and horizontal layouts.

ItemSet · default orientation

Maintenance request #4287

Lobby HVAC — In progress

Assignee

Ashley Green

Priority

Medium

Status

In progress

Updated

2 hours ago

ItemSet · horizontal layout

Building

Main building

Room

Conference Room A

Reported

Jan 15, 2026

Description

HVAC unit running loudly since morning.

Reported by Ashley Green

Item · interactive (onClick)

Item · with avatar leading

Team

Ashley Green

Facilities manager

Ollie Brooks

Lead technician

Mitch Galehouse

Maintenance tech

Example

<Item
  label="Assignee"
  text="Ashley Green"
  leadingAvatar={{ initials: "AG" }}
  trailing={<Badge type="soft">Active</Badge>}
/>

Props

orientation:"default" | "horizontal"= "default"

default = vertical stack; horizontal = label-left / content-right.

label:ReactNode

In default orientation, stacks above content; in horizontal, renders left.

text:ReactNode

Primary text (required for content).

supportingText:ReactNode

Secondary line below text.

leadingIcon:IconDefinition

Leading icon. Ignored when leadingAvatar is set.

leadingAvatar:{ src?, alt?, initials? }

Leading avatar. Takes precedence over leadingIcon.

trailing:ReactNode

Trailing slot — Badge, LinkButton, etc.

onClick:() => void

Makes the item interactive (hover overlay).

Example

<ItemSet heading="Details">
  <Item label="Status" text="Open" />
  <Item label="Priority" text="High" />
</ItemSet>

Props

heading:ReactNode

Section heading rendered in a muted header row.

description:ReactNode

Optional description below heading.

headingAvatar:{ src?, alt?, initials? }

Leading avatar for the section heading.

children:ReactNode

Item elements separated by a Divider.

Tokens

The design-system primitives every component resolves to — values from kits/go/tokens/* mirrored to Tailwind @theme in app/globals.css.

Color

surface

#fafafa

surfaceRaised

#ffffff

surfaceMuted

#f4f4f5

onSurface

#3f3f46

onSurfaceMuted

#71717b

primary

#1734a1

onPrimary

#ffffff

error

#c10007

onError

#ffffff

errorContainer

#fef2f2

errorBorder

#ffc9c9

success

#00c950

successStrong

#008236

successContainer

#f0fdf4

successBorder

#b9f8cf

warning

#f0b100

warningStrong

#a65f00

warningContainer

#fefce8

warningBorder

#fff085

infoContainer

#edf0fc

infoBorder

#c9d3f7

accent

#ca3500

accentContainer

#ffedd4

borderDefault

#9f9fa9

borderMuted

#e4e4e7

brand50

#edf0fc

brand100

#e0e5fb

brand200

#c9d3f7

brand300

#a6b6f2

brand400

#94a7f0

brand500

#5574e7

brand700

#1f45d6

brand900

#1734a1

brand950

#041662

Spacing

4xs

2px

3xs

4px

2xs

6px

8px

10px

12px

16px

20px

2xl

24px

3xl

32px

4xl

40px

Radius

4px

6px

10px

12px

round

100px

Typography

heading-1

The quick brown fox

30/36 · 800

heading-2

The quick brown fox

24/32 · 700

heading-3

The quick brown fox

20/28 · 700

label-large

The quick brown fox

16/24 · 500

label-medium

The quick brown fox

15/20 · 500

label-small

The quick brown fox

12/16 · 500

body-medium

The quick brown fox

15/20 · 400

body-small

The quick brown fox

12/16 · 400

link-medium

The quick brown fox

15/20 · 400

link-medium-hovered

The quick brown fox

15/20 · 400

Opacity

hovered

0.08

pressed

0.16

focused

0.1

disabledContainer

0.1

disabledContent

0.4

GO Design System

Icons

Sizes

Regular vs Solid

Reference glyphs

Logo

Avatar

Button

Icon Button

Link Button

Button Group

FAB

Badge

Chip

Divider

Notification

Tooltip

Dropdown Menu

Sheet

Input

Input Group

Text Area

Select

Combobox

Checkbox

Field

Field Set

Location

Form

Maintenance request

Location

Details

Alert

Navbar

Sidebar

Breadcrumb

Toolbar

Page Heading

Maintenance requests

Request #4287

Building 4

Section Heading

Calendar

Date Picker

Time Picker

Data Table

Item / Item Set

Color

Spacing

Radius

Typography

Opacity