Your trial ends in 3 days
Add a payment method to keep your workspace.
Props
import { Alert } from '@kition/tessera-ui'
<Alert
tone="warning"
title="Your trial ends in 3 days"
description="Add a payment method to keep your workspace."
/>When to use
- A state of the account or page the person should know about.
When not to
- A short confirmation after an action: use a toast.
Examples
Tones, action, close
Password sign-in is turned off
People sign in with GitHub or Google until you turn it back on.
Credits added
Your plan renews in 3 days
The last payment failed
Update the card to keep syncing.
import { useState } from 'react'
import { Alert, Button } from '@kition/tessera-ui'
export default function Demo() {
const [shown, setShown] = useState(true)
return (
<div style={{ display: 'grid', gap: 8 }}>
<Alert title="Password sign-in is turned off" description="People sign in with GitHub or Google until you turn it back on." />
<Alert tone="success" title="Credits added" />
<Alert tone="warning" title="Your plan renews in 3 days" action={<Button size="sm">Manage</Button>} />
{shown ? <Alert tone="danger" title="The last payment failed" description="Update the card to keep syncing." onClose={() => setShown(false)} /> : null}
</div>
)
}Props
Alert
A message in the page: what happened or what to know, in its tone, with an optional action.
| Prop | Type | Default | Description |
|---|---|---|---|
tone | Exclude<Tone, 'neutral'> | 'info' | |
titlerequired | ReactNode | — | |
description | ReactNode | — | |
action | ReactNode | — | A button or link at the end (Retry, Upgrade). |
onClose | () => void | — | Shows a close button that calls it. |
className | string | — | |
testId | string | — |