Data display

Try it

Pick a colour, then switch emphasis to high.

<WildBadge
  color="success"
  emphasis="low"
  size="xs"
>
  Reporting
</WildBadge>

When to use

Colours

Eight colours, each at two emphasis levels.

<WildBadge color="success">Online</WildBadge>
<WildBadge color="warning" emphasis="high">Low battery</WildBadge>

Emphasis

Low is a tint with coloured text; high is a solid fill. Ghost and neutral share one high fill, so they’re left out below.

Sizes

Accessibility

A badge isn’t focusable, and a screen reader reads its label as text. Every colour clears 4.5:1 at both emphasis levels but one: a high-emphasis live badge is white on blue-1000, accepted at 4.23:1.

Props

Tokens

Try it

Click the chip to select it, and the cross to remove it.

<WildChip
  variant="outline"
  size="md"
  removable
>
  Bore 12
</WildChip>

When to use

Variants

Five. Outline is the default and covers most uses.

<WildChip variant="outline" removable>Bore 12</WildChip>
<WildChip variant="accent" selected>North paddock</WildChip>

Sizes

States

Remove button

The × takes the chip’s own colour, and hovering it fills a circle in the chip’s light step. On a selected chip it takes the chip’s ink.

<WildChip variant="success" removable>Reporting</WildChip>

Accessibility

A selectable chip is a toggle button, so a screen reader hears its label and whether it’s pressed. The cross is a separate button named “Remove” plus the label.

Props

Tokens

Try it

Turn on the dot, then step down through the sizes.

Content

photoinitials

Size

3xs2xsxssmmdlgxl2xl

Family

bluegreenorangeredpurpleneutral

Initials

JMJWE

Square

Dot

<WildAvatar
  size="md"
  color="blue"
  src="/team/aroha.jpg"
/>

Copy

When to use

Sizes

Eight, from 16 to 64px, so one avatar works in a table cell and on a profile screen.

<WildAvatar size="sm" initials="JM" color="blue" />
<WildAvatar size="md" src="/team/jm.jpg" alt="Joel Mann" />

Colour families

Six. Pick the family from the name, so the same person is the same colour on every screen.

Shape and presence

Accessibility

An avatar isn’t focusable, and its initials are read out as letters. The dot is announced as “Online”.

Props

Tokens

Try it

Swap the contents, the padding and the header.

<WildCard title="Sign in" subtitle="Enter your email and password.">
  <WildFormField label="Email"><WildInput v-model="email" /></WildFormField>
  <WildFormField label="Password"><WildInput v-model="password" /></WildFormField>
  <WildButton variant="primary">Sign in</WildButton>
</WildCard>

When to use

Anatomy

A white surface with a soft shadow. The header and footer are optional, and a rule splits each from the body.

<WildCard title="Alarm notifications" subtitle="Choose how alarms reach you.">
  <div>Email<WildToggle v-model="email" /></div>
  <div>SMS<WildToggle v-model="sms" /></div>
  <div>In-app<WildToggle v-model="inApp" /></div>
  <template #footer><WildButton>Save</WildButton></template>
</WildCard>

Actions

Padding

Each label gives the body inset as top and bottom / sides. The header and footer keep theirs.

Content

Accessibility

A card is a plain container with no role. Its title is a level-3 heading, so screen readers can jump to it.

Props

Tokens

Try it

Click a page number or a chevron, then try 128 pages and step through the middle.

<WildPagination
  v-model="page"
  variant="numbered"
  :total-pages="20"
  :total-items="493"
  :items-per-page="25"
  size="md"
/>

When to use

Anatomy

The count, then the previous chevron, the page window and the next chevron.

<WildPagination v-model="page" variant="numbered"
  :total-pages="128" :total-items="3193" :items-per-page="25" />

Variants

Simple is the count and the chevrons. Numbered adds the page window between them.

Sizes

Two. Use sm under a dense table, such as one inside a dialog or card.

States

Accessibility

It’s a navigation landmark named Pagination. The chevrons are named Previous page and Next page, and the current page is announced as current.

Props

Tokens

Try it

Change the number of series and add a reference to see which colour each key takes.

<Legend
  items={[
    { label: 'Block 3' },
    { label: 'Block 7' },
    { label: 'Block 12' },
  ]}
  period="Last 7 days"
/>

When to use

Anatomy

A key and a label for each series, then an optional period on the right. On a narrow card the keys wrap to a second line.

<Legend
  items={[
    { label: 'Block 3' },
    { label: 'Block 7' },
    { label: 'Block 12' },
  ]}
  period="Last 7 days"
/>

Colours

Leave out color and solid keys take the series ramp in order, as the line chart’s lines do. A reference key is hollow and grey, so it stands out by its shape as well as its colour.

<Legend
  items={[
    { label: 'Block 3' },
    { label: 'Block 7' },
    { label: 'Block 12' },
    { label: 'Block 15' },
    { label: 'Block 21' },
  ]}
/>

<Legend
  items={[
    { label: 'Block 3' },
    { label: 'Farm average', dashed: true },
  ]}
/>

Content

Accessibility

A screen reader reads each label in order, then the period, and the keys are silent. Give the chart an ariaLabel that names the same series.

Props

Tokens

Try it

Change the density and the ground, then click a header to sort.

<TableRoot density="default">
  <Table minWidth={520}>
    <TableHeader>…</TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Bore 12</TableCell>
        <TableCell numeric tone="bad">−15.9</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableRoot>

When to use

Anatomy

Set striped, bordered and interactive once on TableBody, so every row matches.

<TableRoot density="default">
  <Table>
    <TableColgroup><TableCol width="15%" /></TableColgroup>
    <TableHeader>
      <TableRow><TableHead numeric>Soil %</TableHead></TableRow>
    </TableHeader>
    <TableBody striped interactive>…</TableBody>
    <TableFooter>…</TableFooter>
  </Table>
</TableRoot>

Sorting and selection

Click a header, then tick some rows.

Tone

Tone a cell when the number is the finding, such as the gap to target.

Empty and unknown values

Pass an empty state to empty on TableRoot. The header stays.

Content

Accessibility

A sortable header announces the order it will switch to. Name each row’s checkbox after the row, and announce the selected count.

Props

Tokens

Try it

Change the status, then turn the pulse and label off.

<WildStatusIndicator
  status="online"
  size="md"
/>

When to use

States

Six statuses. Online, warning and error pulse by default.

<WildStatusIndicator status="online" />
<WildStatusIndicator status="warning" />
<WildStatusIndicator status="error" />
<WildStatusIndicator status="offline" />
<WildStatusIndicator status="info" />
<WildStatusIndicator status="success" />

Sizes

Three dots: 8, 12 and 16px. The default is md.

<WildStatusIndicator status="online" size="sm" :pulse="false" />
<WildStatusIndicator status="online" size="md" :pulse="false" />
<WildStatusIndicator status="online" size="lg" :pulse="false" />

Device rows

For a list of devices, use WStatusRow. Give it onClick when the row opens the device.

<WStatusRow
  first
  status="offline"
  title="Bore 12"
  meta="Offline · last reading 3 days ago"
  onClick={openDevice}
/>

Content

Accessibility

The dot is hidden from screen readers and the word is read, or the label when showLabel is off. The pulse stops when reduced motion is on.

Props

Tokens

Try it

Filter it, turn on Problems only, simulate an event, and move between rows with the arrow keys.

<WActivityFeed
  items={executions}
  now={now}
  density="comfortable"
  filter={family}
  onFilterChange={setFamily}
  failuresOnly={problemsOnly}
  onFailuresOnlyChange={setProblemsOnly}
  newCount={held.length}
  onShowNew={releaseHeld}
  onItemClick={openExecution}
  renderActions={rowActions}
  hasMore
  onLoadMore={loadOlder}
/>

When to use

Grouping

Rows group under Today, Yesterday, This week and Older, each with a count. A rail joins the rows of a group, so the list reads as a sequence.

States

Skeleton rows while loading. An empty feed says why it’s empty, and a filtered one offers to show everything.

Content

Accessibility

Each row is announced as its type, its outcome and its description, then the details and the full time. Day labels are headings, and Problems only is a checkbox.

Props

Tokens

Try it

Remove a filter and the count widens with it. Tab into the row, then use the arrow keys and Backspace.

<WildFilterChips
  :chips="activeFilters"
  label="Filters"
  :count="countLabel"
  empty-text="No filters applied"
  @remove="removeFilter"
  @clear="clearFilters"
/>

When to use

Anatomy

A label, the chips, Clear all and the count, on one line that wraps. Only the chips wrap; the label and count hold the ends.

Chip content

A value on its own, a field and its value, and an optional icon.

Sizes

28 under a table, 32 in a toolbar, 36 beside a large search field.

States

The chip isn’t a button. Its states belong to the ×, and the chip answers them.

In context

Add filters from the button, remove them from the chips, and watch the rows change.

Accessibility

The row is one tab stop. A screen reader hears which filter went, and the new count.

Props

Tokens

Try it

Hover the row and its time, or tab to it and press Enter.

<WActivityItem
  item={run}
  now={now}
  onClick={openRun}
  actions={
    <>
      <WActivityAction label="Retry" icon={<ArrowPathIcon />} onClick={retry} />
      <WActivityAction label="View log" icon={<DocumentTextIcon />} onClick={openLog} />
      <WActivityAction label="More" icon={<EllipsisHorizontalIcon />} onClick={openMenu} />
    </>
  }
/>

When to use

Anatomy

Tile, words, actions and time. In a narrow row, the actions drop below the words.

Process types

Eight processes in four families, one colour each.

Statuses

Five, each with its own mark shape.

States

A clickable row is a button with a hover ground and a tab stop.

Metadata

Everything after the description is optional.

Density

Comfortable for a full feed, compact for a narrow card.

Timestamps

In context

A feed card built from rows, grouped by day.

Content

Accessibility

Screen readers hear the process, status and description, then meta, message and time.

Props

Tokens