Typography

Titles, paragraphs and inline text, with ellipsis, copy, edit and the semantic color types.

Title levels

Set level from 1 to 5 on Title to render an h1 to h5 heading, each a step smaller than the one before.

Text types

Set type on Text to secondary, tertiary, success, warning or danger, disabled to gray it out, and use Link for links.

Size ramp

Set size to label, sm or xs on Text or Paragraph to step down from your theme's base text size.

Decorations

Set strong, italic, underline, delete, mark, code or keyboard on Text, and combine them as you need.

Code and keys

Inline code, keyboard keys and a native pre block inside a Paragraph, all drawn in the theme's colors in light and dark mode.

Paragraph

Use Paragraph for a block of text with a bottom margin, with type for quieter copy and Text, <b> or <i> inside it.

Article wrapper

Wrap native h2, p, ul, blockquote and pre in a root Typography to style Markdown or CMS output without classes.

Native tables

A native <table> inside a root Typography gets the same document styles, for a small pricing or comparison table.

Copyable

Set copyable to add a copy button, and pass copyable.text to copy a different value than the one shown, like a full link.

Copy tooltips

Pass copyable.tooltips a pair of labels for before and after copying, or false to show no tooltip at all.

Custom copy icons

Pass copyable.icon a pair of icons for before and after copying, which replace the default animated ones.

Editable

Set editable to edit text in place, with triggerType to start from a click on the text and maxLength to cap its length.

Action placement

Set actions={{ placement: "start" }} to put the copy and edit buttons before the text instead of after it.

Ellipsis

Set ellipsis to cut Text at the end of one line, or pass rows to cut a Paragraph after that many lines.

Ellipsis with tooltip

Pass ellipsis={{ tooltip }} to show the full text in a tooltip when the reader hovers the cut-off line.

Expandable ellipsis

Set ellipsis.expandable to add a link that opens the clamped text, which then stays open.

Collapsible ellipsis

Set expandable: "collapsible" so the text can close again, and pass symbol a function to label both directions.

Controlled ellipsis

Pass ellipsis.expanded and onExpand to drive the clamp from your own state, here from a switch above the text.

Middle ellipsis

Pass ellipsis.suffix to keep the end of the text visible and cut the middle instead, for file paths, IDs and keys.

Rows and suffix

Pass ellipsis.rows a number, here set by the slider, and suffix to keep an attribution after whatever text still fits.

classNames and styles

Pass classNames a class per part: root for the text, action for the copy and edit buttons, textarea for the editor.

In context

The component inside real screens, with the components it usually sits beside.

Release note

A release note in a root Typography, with a Title, an editable summary, a copyable install command and an editable owner.

API keys

An API key card where each key is cut in the middle to keep its last characters, and the copy button copies the full key.

API Reference

Typography
Typography's props. Rows marked antuikit in the Version column are added by the kit.
Typography.Text
Typography.Text's props. Rows marked antuikit in the Version column are added by the kit.
Typography.Title
Typography.Title's props. Rows marked antuikit in the Version column are added by the kit.
Typography.Paragraph
Typography.Paragraph's props. Rows marked antuikit in the Version column are added by the kit.
actions
actions's props.
copyable
copyable's props. Rows marked antuikit in the Version column are added by the kit.
editable
editable's props. Rows marked antuikit in the Version column are added by the kit.
ellipsis
ellipsis's props.