Components / Onboarding and feedback / Companion card
F2 · Onboarding and feedback
Companion card
A speech card with a dismiss control. The artwork is an empty labelled slot.
<section class="card">
<div class="top"><h3>Companion</h3><button type="button" class="btn sm ghost">Dismiss</button></div>
<div class="slot">Bud companion, pending yravgBud</div>
</section>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A product reserves a place for a companion.
- The artwork is not ready.
When not to use
- There is no companion in the product.
- The message is a field error. Put the error on the field.
Usage
<section class="card">
<div class="top"><h3>Companion</h3><button type="button" class="btn sm ghost">Dismiss</button></div>
<div class="slot">Bud companion, pending yravgBud</div>
</section>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| slot label | text | Bud companion, pending yravgBud | Exact label while yravgBud is pending. |
| data-dismiss | button | — | Hides the card in this preview. |
Keyboard
| Key | Action |
|---|---|
| Enter | On Dismiss, hides the card. |
| Tab | Moves from the heading row to Dismiss. |
Accessibility
- The slot exposes the same words as its accessible name.
- Dismiss is a button.
- No artwork is implied by an empty box.
Motion
- Dismiss hides the card without an exit animation.
Pattern origin
Pattern type: a dismissible speech card. The artwork slot is empty on purpose.