Patterns

Mono Label

A small uppercase caption in the monospace font.

Team members

The team uses 8 of the 10 seats of the plan.

import { Card, CardContent, CardHeader, MonoLabel } from 'ferry-ui'

export default function MonoLabelHero() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <MonoLabel as="h3">Team members</MonoLabel>
      </CardHeader>
      <CardContent className="text-[13px] text-foreground-light">
        The team uses 8 of the 10 seats of the plan.
      </CardContent>
    </Card>
  )
}

Usage guidelines#

A caption of 1 to 4 words. Use MonoLabel for a card title, a metric label, a column header or a menu group heading.
Not for sentences. Do not use it for body text, a long sentence or the main heading of a page.
Use the element that fits the meaning. The as prop sets the element.
A table has this look. TableHead of Table shows its text the same way.

Anatomy#

Import the component. It has one part.

Write the text in normal case. The component shows it in uppercase.

Anatomy

import { MonoLabel } from 'ferry-ui'

<MonoLabel>Monthly revenue</MonoLabel>

Examples#

Element#

MonoLabel is a span element by default. Set as to change the element. This example uses legend to name a group of controls.

Email notificationsNew invoicesWeekly summary

import { Checkbox, Label, MonoLabel } from 'ferry-ui'

export default function MonoLabelLegend() {
  return (
    <fieldset className="flex w-full max-w-xs flex-col gap-2.5">
      <MonoLabel as="legend" className="mb-2">
        Email notifications
      </MonoLabel>
      <Label className="text-[13px] font-normal text-foreground-light">
        <Checkbox name="notifications" value="invoices" defaultChecked />
        New invoices
      </Label>
      <Label className="text-[13px] font-normal text-foreground-light">
        <Checkbox name="notifications" value="summary" />
        Weekly summary
      </Label>
    </fieldset>
  )
}

Value of `as`	Use
`span` (default), `div`, `p`	A caption.
`h2`, `h3`, `h4`	The heading of a section or of a menu group.
`dt`	A term in a description list.
`th`	A header cell in a table that you build with the `table` element.
`legend`	The name of a `fieldset` element.
`label`	The label of a form field.

Field label#

With as="label", pass htmlFor with the id of the field. A click on the label then moves the focus to the field.

For a field with a hint or an error, use Field.

Workspace ID

import { Input, MonoLabel } from 'ferry-ui'

export default function MonoLabelForField() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <MonoLabel as="label" htmlFor="workspace-id">
        Workspace ID
      </MonoLabel>
      <Input id="workspace-id" mono readOnly defaultValue="ws_8f3a9c1e" />
    </div>
  )
}

Color#

The text uses the foreground-lighter token. Add a text-* token class to change the color.

Due dateOverdueTotal

import { MonoLabel } from 'ferry-ui'

export default function MonoLabelColor() {
  return (
    <>
      <MonoLabel>Due date</MonoLabel>
      <MonoLabel className="text-destructive">Overdue</MonoLabel>
      <MonoLabel className="text-foreground">Total</MonoLabel>
    </>
  )
}

Long text#

In a narrow space, do not let the caption wrap. Add truncate. Give the full text in title.

Invitations from other workspaces

import { MonoLabel } from 'ferry-ui'

const TEXT = 'Invitations from other workspaces'

export default function MonoLabelTruncate() {
  return (
    <MonoLabel as="div" title={TEXT} className="w-40 truncate">
      {TEXT}
    </MonoLabel>
  )
}

The mono-label class#

The mono-label class gives the same look to an element of your own.

Monthly revenue

$12,480

export default function MonoLabelClass() {
  return (
    <figure className="flex flex-col gap-1">
      <figcaption className="mono-label">Monthly revenue</figcaption>
      <span className="text-2xl text-foreground tabular">$12,480</span>
    </figure>
  )
}

API reference#

MonoLabel also accepts each global HTML attribute.

Prop	Type	Default
`as`	"div" \| "dt" \| "h2" \| "h3" \| "h4" \| "label" \| "legend" \| "p" \| "span" \| "th"	span
Element to render. Defaults to `span`. Use `h2`/`h3` for section and menu-group headings, `dt` inside description lists, `th` in hand-built tables (the Table primitive's `TableHead` already has this look), `legend` inside a `fieldset`, `label` (with `htmlFor`) for form fields.
`htmlFor`	string	-
Id of the form control this label describes. Only meaningful with `as="label"`.
`scope`	string	-
Cells this header describes (`col`, `row`…). Only meaningful with `as="th"`.