RecommendationCard
A tip on a card: what to try, why, a link to do it and how long it takes, with optional media, dismissed for good once closed.
import { RecommendationCard } from "@butteryui/react";Demo
Send low-stock alerts to the roastery
Get a message when a green coffee drops under two weeks of roasting.
When to use it
Use it for
- A page's right rail suggesting one feature to try, such as low-stock alerts
- An overview's tip that needs a title and a reason, not just a line
Not for
- One line across a page: use Banner
- Several steps to get set up: use SetupGuide
- Introducing a whole feature on an empty page: use FeatureIntro
Examples
Low stock alerts
A tip for a page's right rail that stays dismissed on later visits.
Send low-stock alerts to the roastery
Get a message when a green coffee drops under two weeks of roasting.
Overview tip
A tip at the top of an overview page: its action turns the feature on in place, and once it's dismissed the sections under it slide up.
Overview
Send low-stock alerts to the roastery
Get a message when a green coffee drops under two weeks of roasting.
Green coffee
Low-stock alerts: off
This week's roasts
Guji on Tuesday, house espresso on Thursday.
Subscription discount
A tip with its own badge, whose action does its work in place through a button rather than a link.
Offer a subscription discount
Subscribers who start with a discount stay twice as long.
Variants and states
A tip in a rail
Dismiss it: it fades where it is and what's below slides up.
Send low-stock alerts to the roastery
Get a message when a green coffee drops under two weeks of roasting.
Text only, with its own badge
Offer a subscription discount
Subscribers who start with a discount stay twice as long.
Props
RecommendationCard
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | What to try, in title-md. | |
titleAs | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "h3" | The title's element. Defaults to "h3". |
childrenrequired | ReactNode | Why it's worth it, in body-sm. | |
badge | string | "Tip" | The badge on its first line. Defaults to "Tip". |
action | GuidanceAction | The link that does it, at the start of the footer. | |
estimate | string | How long it takes, such as "1 min", at the end of the footer. | |
media | ReactNode | An image or illustration along the bottom, edge to edge. | |
dismissLabel | string | "Dismiss" | Names the dismiss button. Defaults to "Dismiss". |
onDismiss | (() => void) | Called once it has faded and gone. | |
storageKey | string | Remembers the dismissal under this key, so it stays gone on later visits. |
It also takes Omit<MotionElementProps<"div">, "title" | "children">.
GuidanceAction
What a guidance part points to: a label, and where it goes or what it does.
| Field | Type | Default | Description |
|---|---|---|---|
labelrequired | string | What it says, such as "Connect a label printer". | |
href | string | Makes it a link to this page. | |
onClick | ((event: MouseEvent<HTMLElement>) => void) | Runs when it's pressed, or as its link is followed, where a router can take over. |
Accessibility
The title is an h3 by default. The action is a link, or a button without an href; the time estimate is read as Takes about and the time. The dismiss button is named Dismiss; once it's pressed the card fades and is gone, and focus in it moves on to the next tab stop.
| Keys | What they do |
|---|---|
| Enter or Space | Presses Dismiss, which fades the card away and moves focus on to the next tab stop, or the action when it has no href |
| Enter | Follows the action when it has an href |
Motion
It appears with a `Presence` preset and leaves faster than it came, in about 60% of the time.
With reduced motion: Dismissed, it fades out over 100ms, and what's below it in a ReflowGroup, such as an AppPage, takes its place at once.
Layout
It takes its container's width on a card, its content padded 16px: the badge and a 28px dismiss button on the first line, then the title and, 12px under it, the reason, both of which wrap, and a footer with the action at the start and the time estimate at the end. Media runs edge to edge along the bottom, clipped to the card's corners.
Related
See it in the roastery demo's overview.