Project updated
The client moved Friday's kickoff call to 3:00 PM.
Proposal accepted
Camille Dubois will start on the project on Monday.
Report due soon
Submit the project report within 48 hours to release the payment.
Payment failed
We could not charge your card. Update your payment method.
<Alert.Root variant="warning">
<WarningIcon />
<Alert.Title>Report due soon</Alert.Title>
<Alert.Description>Submit the report within 48 hours.</Alert.Description>
</Alert.Root>Alert.Action and Alert.Close are optional slots the layout knows about, so a
button or a dismiss control lands in the right place without wrapper markup.
Application withdrawn
You withdrew your proposal for the website redesign project.
New feature
You can now message clients directly from a project page.
API
Alert.Root
| Prop | Type | Default | |
|---|---|---|---|
variant | "default" | "destructive" | "success" | "warning" | — | Severity. destructive for an error the reader has to act on, warning
for something that will bite later, success for a completed outcome;
default is neutral information. |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: alert/components/alert-root.tsx.
Alert.Action
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: alert/components/alert-action.tsx.
Alert.Close
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <button> prop. Source: alert/components/alert-close.tsx.
Alert.Description
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: alert/components/alert-description.tsx.
Alert.Title
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: alert/components/alert-title.tsx.