Alert
Alert variants and assertiveness examples.
Examples
import * as Alert from "@solidiom/alert"
;<Alert.Root type="info">
<Alert.Title>Information</Alert.Title>
<Alert.Description>A new feature is available in your dashboard.</Alert.Description>
</Alert.Root>Variants
Alert supports four visual variants controlled by the type prop.
;<Alert.Root type="success">
<Alert.Title>Success</Alert.Title>
<Alert.Description>Your changes have been saved.</Alert.Description>
</Alert.Root>
;<Alert.Root type="warning">
<Alert.Title>Warning</Alert.Title>
<Alert.Description>You are approaching your storage limit.</Alert.Description>
</Alert.Root>
;<Alert.Root type="error">
<Alert.Title>Error</Alert.Title>
<Alert.Description>Failed to connect to the server.</Alert.Description>
</Alert.Root>Assertiveness
Control how the alert is announced to screen readers with the assertiveness prop. Use polite for non-urgent updates that should not interrupt the user.
;<Alert.Root type="info" assertiveness="polite">
<Alert.Title>Update</Alert.Title>
<Alert.Description>New messages have arrived.</Alert.Description>
</Alert.Root>Information
A new feature is available in your dashboard.
Success
Your changes have been saved.
Warning
You are approaching your storage limit.
Error
Failed to connect to the server.
View source
export function Root(props: AlertRootProps) {
const titleId = createStableId("alert-title")
const descriptionId = createStableId("alert-desc")
const role = () => (props.assertiveness === "polite" ? "status" : "alert")
const alertType = () => props.type ?? "info"
return (
<AlertContext value={{ titleId, descriptionId }}>
<div
role={role()}
aria-labelledby={titleId}
aria-describedby={descriptionId}
class={props.class}
{...applySemanticAttrs({ scope: "alert", part: "root", state: alertType() })}
>
{props.children}
</div>
</AlertContext>
)
}