Alert

Solidtype_heroui.Alert is a <div> with the classes HeroUI’s own alertVariants gives, its indicator drawing its status’s icon, its title and its description; it is a default surface to what is inside it. It has no role, as HeroUI’s has none. Kobalte’s Alert is role="alert", which a reader announces as it appears, so the port is HeroUI’s <div>, and an alert to be announced is given the role.

Usage

New features available

Check out our latest updates including dark mode support and improved accessibility features.

Update available

A new version of the application is available. Please refresh to get the latest features and bug fixes.Refresh

Refresh

Unable to connect to server

We're experiencing connection issues. Please try the following:

• Check your internet connection
• Refresh the page
• Clear your browser cache

Retry

Retry

Profile updated successfully

Processing your request

Please wait while we sync your data. This may take a few moments.

Scheduled maintenance

Our services will be unavailable on Sunday, March 15th from 2:00 AM to 6:00 AM UTC for scheduled maintenance.

alert_usage.mlx

module Alert = Solidtype_heroui.Alert
module Button = Solidtype_heroui.Button
module Close_button = Solidtype_heroui.Close_button
module Spinner = Solidtype_heroui.Spinner

let make () =
  <div class_="grid w-full max-w-xl gap-4">
    <Alert>
      <Alert.Indicator />
      <Alert.Content>
        <Alert.Title>"New features available"</Alert.Title>
        <Alert.Description>
          "Check out our latest updates including dark mode support and \
           improved accessibility features."
        </Alert.Description>
      </Alert.Content>
    </Alert>
    <Alert status=`accent>
      <Alert.Indicator />
      <Alert.Content>
        <Alert.Title>"Update available"</Alert.Title>
        <Alert.Description>
          "A new version of the application is available. Please refresh to \
           get the latest features and bug fixes."
        </Alert.Description>
        <Button class_="mt-2 sm:hidden" size=`sm variant=`primary>
          "Refresh"
        </Button>
      </Alert.Content>
      <Button class_="hidden sm:block" size=`sm variant=`primary>
        "Refresh"
      </Button>
    </Alert>
    <Alert status=`danger>
      <Alert.Indicator />
      <Alert.Content>
        <Alert.Title>"Unable to connect to server"</Alert.Title>
        <Alert.Description>
          "We're experiencing connection issues. Please try the following:"
          <ul class_="mt-2 list-inside list-disc space-y-1 text-sm">
            <li>"Check your internet connection"</li>
            <li>"Refresh the page"</li>
            <li>"Clear your browser cache"</li>
          </ul>
        </Alert.Description>
        <Button class_="mt-2 sm:hidden" size=`sm variant=`danger>
          "Retry"
        </Button>
      </Alert.Content>
      <Button class_="hidden sm:block" size=`sm variant=`danger>"Retry"</Button>
    </Alert>
    <Alert status=`success>
      <Alert.Indicator />
      <Alert.Content>
        <Alert.Title>"Profile updated successfully"</Alert.Title>
      </Alert.Content>
      <Close_button />
    </Alert>
    <Alert status=`accent>
      <Alert.Indicator><Spinner size=`sm /></Alert.Indicator>
      <Alert.Content>
        <Alert.Title>"Processing your request"</Alert.Title>
        <Alert.Description>
          "Please wait while we sync your data. This may take a few moments."
        </Alert.Description>
      </Alert.Content>
    </Alert>
    <Alert status=`warning>
      <Alert.Indicator />
      <Alert.Content>
        <Alert.Title>"Scheduled maintenance"</Alert.Title>
        <Alert.Description>
          "Our services will be unavailable on Sunday, March 15th from 2:00 AM \
           to 6:00 AM UTC for scheduled maintenance."
        </Alert.Description>
      </Alert.Content>
    </Alert>
  </div>

Anatomy

<Alert>
  <Alert.Indicator />
  <Alert.Content>
    <Alert.Title>"Title"</Alert.Title>
    <Alert.Description>"Description"</Alert.Description>
  </Alert.Content>
</Alert>

Examples

Announced

role=`alert has a reader announce the alert as it appears.

Payment failed

Your card was declined.

alert_announced.mlx

module Alert = Solidtype_heroui.Alert

let make () =
  <Alert role=`alert status=`danger>
    <Alert.Indicator />
    <Alert.Content>
      <Alert.Title>"Payment failed"</Alert.Title>
      <Alert.Description>"Your card was declined."</Alert.Description>
    </Alert.Content>
  </Alert>

Customization

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every alert, as with HeroUI in React:

@layer components {
  .alert {
    @apply rounded-2xl shadow-lg;
  }

  .alert__title {
    @apply font-bold;
  }
}

Styling Reference

CSS Classes

• .alert, and its statuses .alert--default, .alert--accent, .alert--success, .alert--warning, .alert--danger
• .alert__indicator, .alert__content, .alert__title, .alert__description

API Reference

Each prop beside the name HeroUI’s React component gives it.

Alert

React	solidtype	Type	Default	Description
status	status	[ `default | `accent | `success | `warning | `danger ]	`default	Its status, and its icon
role	role	Solidtype.Html.Div.role		`alert to be announced
className	class_	string		Added after HeroUI’s classes
children	children	elements		Its parts

Alert.Indicator, Content, Title, Description

Each takes class_, added after HeroUI’s class, and its children; the indicator’s take the place of its status’s icon.

Beside React

Original HeroUI documentation: Alert.

The same HeroUI Alert twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two: a marked row is one they disagree on.

solidtype — OCaml, on Solid and Kobalte

Saved

Your changes are saved.

React — TypeScript, on React Aria

attribute	solidtype	React