TrialBanner
The trial / upgrade banner from Attio's sidebar footer.
Attio's sidebar footer strip: an icon + a message on the left and a small action pill on the right, in a compact 28px row. The action uses the same soft-glow outlined-button shadow as the rest of the app. Tint the icon with tone for urgency.
Preview
Usage
import { TrialBanner } from "crisp";
<TrialBanner icon={<Clock size={16} />} action="Keep Pro" onAction={upgrade}>
9 days left on trial!
</TrialBanner>;API
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | Leading icon. |
children | ReactNode | — | The message. |
action | ReactNode | — | Right-aligned pill label. |
onAction | () => void | — | Fired when the action is clicked. |
tone | "neutral" | "warning" | "danger" | "neutral" | Tints the icon for urgency. |