Skip to content

[Feature Request] Add visual variants for Alert container backgrounds and borders#6683

Description

@focus0802

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions