Caret
The mark at the end of text that is still being written.
On this page
A caret is the mark at the end of text that is still being written: a fine upright bar in the ink of the words it follows, that fades out and back about once a second. It says "more is coming" where the words themselves cannot, at the end of an answer as it streams or after a prompt that waits.
Caret
<div class="message w-full max-w(420)" aria-busy="true"> <div class="message-bubble">The table has two million rows, so the column is added as nullable first and filled in batches of ten thousand <span class="caret" aria-hidden="true"></span> </div></div>#Where it goes
Put the caret inside the element that holds the text, right after the last word, with nothing between them. It is an inline box as tall as the letters of the line it is in and takes their color, so it needs no size and no variant: it follows a heading, a paragraph and a line of code alike, on a page, a card and an ink surface.
Remove it when the text is complete. A caret that keeps blinking after the last word tells a reader to keep waiting.
In any text
<h3 class="heading heading-lg">Writing the migration <span class="caret" aria-hidden="true"></span></h3><p class="m(0) text-sm fg-text-body">Checking the three services that read the column <span class="caret" aria-hidden="true"></span></p><pre class="code-block w-full"><code>$ bun run build<span class="caret caret-block" aria-hidden="true"></span></code></pre>#The block caret
caret-block is the wide caret of a terminal, half an em across. Use it after a command in a code block or a window that shows a shell, where the fine bar would be mistaken for a letter.
#Caret, shimmer or typing
A caret follows words that exist and are growing. When nothing is written yet and a few words say work is under way, use shimmer. When another person is typing in a conversation, a message has message-typing. A wait that belongs to a control is a spinner.
#Accessibility
- The caret is decoration: give it
aria-hidden="true". - Mark the region that is being written with
aria-busy="true"and remove it when the text is complete, so a screen reader can read the finished text once and not each word as it arrives. - With
prefers-reduced-motion: reducethe caret does not blink; it stands still at the end of the text.
#Classes
| Class | Description |
|---|---|
caret | A fine upright bar in the ink of the words it follows, as tall as their letters, that fades out and back about once a second |
caret-block | A terminal's caret: half an em wide. With caret |