Consequences
A list of what a confirmation will remove, with counts and names.
- Deployments, 128
- Domains, 4: acme.com, www.acme.com, api.acme.com
- Environment variables, 23
npx shadcn@latest add @sureui/consequences
import { Consequences } from "@/components/ui/sureui/consequences"<Consequences title="Deleting acme-prod removes" items={[ { label: "Deployments", count: 128 }, { label: "Domains", count: 4, names: ["acme.com", "www.acme.com"] }, ]}/>Type to Confirm and Confirm Dialog take a list in their consequences prop.
Long lists
Names past limit collapse into an "and N more" button. The count comes from the names, or from count when there are none to list.
- Members, 6: Maya Chen, Tom Okafor, Priya Nair
- Deployments, 128
If you only have some of the names, pass the total as count and "and N more" includes the rest. Set expandable={false} to keep it as text.
Subject
subject names the thing being deleted, with subjectDescription for a line of facts under it, so people can check it's the right one.
- Issues, 12
- Workflow runs, 340
- Packages, 2: acme-ui, acme-config
Changes
For a change rather than a loss, give an item from and to. The row shows "Pro → Free" where the count would be, and screen readers hear "Plan, from Pro to Free". Leave out from to show only the new value.
- Plan, from Pro to Free
- Seats, from 5 to 1Only you keep access.
- Projects, from 12 to 3The other 9 become read-only.
Destructive
variant="destructive" tints the whole list.
- Databases, 3
- Teams you own, 2: Platform, Growth
Consequences
Each entry in items takes the props of ConsequencesItem.
| Prop | Type | Default |
|---|---|---|
| ...divProps | ComponentProps<"div"> | — |
| subject | ReactNode | — |
| subjectDescription | ReactNode | — |
| items | Consequence[] | — |
| children | ReactNode | — |
| title | ReactNode | — |
| variant | "default" | "destructive" | "default" |
| limit | number | 3 |
| expandable | boolean | true |
| moreLabel | (hidden: number) => string | "and {hidden} more" |
| lessLabel | string | "Show less" |
ConsequencesItem
It uses the limit, expandable, moreLabel and lessLabel set on Consequences.
| Prop | Type | Default |
|---|---|---|
| ...liProps | ComponentProps<"li"> | — |
| label | ReactNode | required |
| count | number | — |
| from | ReactNode | — |
| to | ReactNode | — |
| names | string[] | [] |
| icon | ReactNode | — |
| description | ReactNode | — |
- It renders a list, named by
titlewhen there is one. - The "and N more" button sets
aria-expandedand doesn't submit a surrounding form. - A change row reads as "Plan, from Pro to Free": the arrow is hidden from screen readers.