FeatureIntro
Introduces a feature on its empty page: a title, a line, two or three benefits, a primary action and docs beside an image.
import { FeatureIntro } from "@butteryui/react";Demo
Sell your coffee by subscription
Ship a fresh bag on a schedule, without a new order each time.
- Customers choose every week or every two
- Each delivery is billed on its own day
- Roasts ship the morning they're due
When to use it
Use it for
- A feature's page before it holds anything, such as subscriptions before the first plan
- Explaining what a feature does and the one step that starts it
Not for
- A list or table with nothing in it yet: use EmptyState in its place
- A tip about a feature already in use: use RecommendationCard
Examples
Payouts intro
The payouts page before a bank account is added: its action opens the first step in a dialog, in place.
Pay out to your bank every Friday
Move the week's sales to your account on a set day.
Subscriptions intro
The subscriptions page before its first plan, put away for good once dismissed.
Sell your coffee by subscription
Ship a fresh bag on a schedule, without a new order each time.
- Customers choose every week or every two
- Each delivery is billed on its own day
Variants and states
Copy beside an image
Side by side from 720px of room, stacked under that; this one can be put away.
Sell your coffee by subscription
Ship a fresh bag on a schedule, without a new order each time.
- Customers choose every week or every two
- Each delivery is billed on its own day
- Roasts ship the morning they're due
Copy only
Pay out to your bank every Friday
Move the week's sales to your account on a set day.
Props
FeatureIntro
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | The feature's pitch, in title-lg. It names the section. | |
titleAs | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "h2" | The title's element. Defaults to "h2", under the page's h1. |
descriptionrequired | ReactNode | What the feature does, in a body line under the title. | |
benefits | readonly FeatureBenefit[] | Two or three things it does for people, each with an icon. | |
action | GuidanceAction | The way in, as a primary button. | |
docs | GuidanceAction | Where to read more, as an ArrowLink after the button. | |
media | ReactNode | An image or illustration of the feature at the end, or under the copy when narrow. | |
dismissible | boolean | false | Shows a dismiss button, for an intro people can put away. Defaults to false. |
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<"section">, "title" | "children">.
FeatureBenefit
One thing a feature does for people, with its icon.
| Field | Type | Default | Description |
|---|---|---|---|
iconrequired | ComponentType<IconComponentProps> | A 16px icon before it. | |
textrequired | string | The benefit, in a short line. |
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
A section named by its title, an h2 by default. The benefits are a list. The action is a link styled as the primary button, or a button without an href; the docs link follows it. A dismissible intro's button is named Dismiss; as the intro goes, focus in it moves on to the next tab stop.
| Keys | What they do |
|---|---|
| Enter or Space | Presses Dismiss, which fades the intro away and moves focus on to the next tab stop, or the action or docs link when it has no href |
| Enter | Follows the action or the docs link 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 and is its own size container: from 720px of it the copy and the media sit side by side in two equal columns 32px apart, and narrower the media goes under the copy. Nothing truncates, so the title, description and benefits wrap, and the dismiss button is a 28px icon button at the top end.
Related
See it in the roastery demo's wholesale.