Rebar UI

1.0

imitation

Text

The default paragraph, with a size and a colour scale.

Sizes and coloursDefault, helper text, and an inline span

Identity, site and launch kit for the harbour trust.

Owned by Maya Chen. Due 24 Oct.

Updated 17 Oct, rendered as a span.
As a span
Due 24 Oct
Long text

Offline sync keeps tasks readable on the ferry, then catches up with the server as soon as the crew reaches the quay.

In context

Project summaryBody, helper text and a muted footer in one card
Tideline mobile

Offline tasks and a quiet inbox for the crew.

61% complete, review.

Next milestone: 7 Nov

Eyebrow and section label

Text variant=eyebrow and section-labelUppercase tracked kicker; a label with a hairline rule; Heading eyebrow and rule
Today · Friday 24 October

Saint Raphael the Archangel

Readings

Your data

eyebrow, primary

Account

eyebrow, muted

Narrated by an Athic author

eyebrow on navy (inverse)

Perspective

section-label

This week

rule on both sides

Earlier

section-label, primary

Today

Heading with rule

Your data

Article header and Today section labelsIn context

Your Library

Narrated by an Athic author

Confession to a priest

Catholics confess to a priest because Jesus gave his Apostles the ministry of reconciliation. ΓÇ£Whose sins you shall forgive, they are forgiven themΓÇ¥ (John 20:23).

Citations

Today

This week

Your data

Download or delete everything tied to your account.

Props

PropTypeRequiredDefault
size"xs" | "sm" | "md" | undefinedNo—
color"primary" | "secondary" | undefinedNo—
bionicboolean | undefinedNo—
bionicOptionsBionicOptions | undefinedNo—
variant"body" | "eyebrow" | "section-label" | undefinedNo—
tone"primary" | "muted" | "inverse" | undefinedNo—
rulefalse | "end" | "both" | undefinedNo—
asElementType | undefinedNo—
refRef<Element> | undefinedNo—

data-rebar-* attributes

data-rebar-component="text", data-rebar-size/data-rebar-color set to the current values.

Migrating to Ant Design

Not codemod-covered — AntD's Typography.Text covers the same "small, secondary, inline text" role with a similar type prop for color.

Typed label

With as="label" the props are a <label>'s, so htmlFor is typed (and rejected on a plain <p> Text). Any other element works the same way: as="span" takes span props.

<Text as="label" htmlFor="email" size="sm">Email</Text>