Feature description
The v3 Alert component already supports semantic status values such as default, accent, success, warning, and danger.
However, the Alert container itself still uses the same surface treatment. In the current styles, the base alert uses bg-surface and shadow-surface, while the status modifiers mainly change the indicator and title colors.
This makes Alert easy to miss when it is placed inside a white or surface-colored parent container. The alert can visually blend into the surrounding content even when the message is important.
Proposal
Add a visual variant prop for Alert container presentation, while keeping status for semantic meaning.
For example:
<Alert status="warning" variant="soft">
<Alert.Indicator />
<Alert.Content>
<Alert.Title>Warning</Alert.Title>
<Alert.Description>Please review this before continuing.</Alert.Description>
</Alert.Content>
</Alert>
Possible variants could include:
plain or default: current behavior
soft: tinted background based on the current status
bordered: status-colored border with a subtle background
solid: stronger status-colored background for high-emphasis alerts
Expected behavior
Changing status should continue to control the semantic color. Changing variant should control how visually prominent the Alert container is.
For example:
status="success" variant="soft" could use a subtle success background and border
status="warning" variant="soft" could use a subtle warning background and border
status="danger" variant="bordered" could use a danger border with a light danger-tinted background
Why this would help
This would make Alert easier to distinguish from same-color page surfaces, especially in dashboards, forms, and settings pages where alerts often appear inside white cards or white content containers.
It would also reduce the need for every app to manually customize className just to make alerts visually stand out.
Related context
This is not a request to replace the existing status API. The request is for an additional visual presentation option that can work together with status.
Feature description
The v3 Alert component already supports semantic
statusvalues such asdefault,accent,success,warning, anddanger.However, the Alert container itself still uses the same surface treatment. In the current styles, the base alert uses
bg-surfaceandshadow-surface, while the status modifiers mainly change the indicator and title colors.This makes Alert easy to miss when it is placed inside a white or surface-colored parent container. The alert can visually blend into the surrounding content even when the message is important.
Proposal
Add a visual
variantprop for Alert container presentation, while keepingstatusfor semantic meaning.For example:
Possible variants could include:
plainordefault: current behaviorsoft: tinted background based on the current statusbordered: status-colored border with a subtle backgroundsolid: stronger status-colored background for high-emphasis alertsExpected behavior
Changing
statusshould continue to control the semantic color. Changingvariantshould control how visually prominent the Alert container is.For example:
status="success" variant="soft"could use a subtle success background and borderstatus="warning" variant="soft"could use a subtle warning background and borderstatus="danger" variant="bordered"could use a danger border with a light danger-tinted backgroundWhy this would help
This would make Alert easier to distinguish from same-color page surfaces, especially in dashboards, forms, and settings pages where alerts often appear inside white cards or white content containers.
It would also reduce the need for every app to manually customize
classNamejust to make alerts visually stand out.Related context
This is not a request to replace the existing
statusAPI. The request is for an additional visual presentation option that can work together withstatus.