Alert | RiseUI

Status alerts matching HeroUI v3 Alert (alert.tsx) and alert.css — surface, shadow, indicator, title, description, actions, and optional close.

Usage

Default — general information (`alert--default`, info icon).

const RiseAlert(
  title: Text('New features available'),
  description: Text(
    'Check out our latest updates including dark mode support and improved accessibility features.',
  ),
)

Accent

Accent title/icon, primary action, and close — matches the “Update available” story.

RiseAlert(
  status: RiseAlertStatus.accent,
  title: const Text('Update available'),
  description: const Text(
    'A new version of the application is available. Please refresh to get the latest features and bug fixes.',
  ),
  actions: [
    RiseButton(
      label: 'Refresh',
      size: RiseButtonSize.sm,
      variant: RiseButtonVariant.primary,
      onPressed: () {},
    ),
  ],
  onClose: () {},
)

Success

Confirmation with “View Receipt” — matches the payment success story.

RiseAlert(
  status: RiseAlertStatus.success,
  title: const Text('Payment successful'),
  description: const Text(
    'Your payment of \$49.99 has been processed. A confirmation email has been sent to your inbox.',
  ),
  actions: [
    RiseButton(
      label: 'View Receipt',
      size: RiseButtonSize.sm,
      variant: RiseButtonVariant.primary,
      onPressed: () {},
    ),
  ],
  onClose: () {},
)

Warning

Storage quota — matches the warning story with action + close.

RiseAlert(
  status: RiseAlertStatus.warning,
  title: const Text('Storage almost full'),
  description: const Text(
    "You're using 90% of your storage quota. Consider upgrading your plan or removing unused files to avoid service interruption.",
  ),
  actions: [
    RiseButton(
      label: 'Manage Storage',
      size: RiseButtonSize.sm,
      variant: RiseButtonVariant.primary,
      onPressed: () {},
    ),
  ],
  onClose: () {},
)

Danger

Error with bullet steps and Retry — matches the connection error story.

RiseAlert(
  status: RiseAlertStatus.danger,
  title: const Text('Unable to connect to server'),
  description: const Text('Try the steps below, then retry.'),
  actions: [
    RiseButton(
      label: 'Retry',
      size: RiseButtonSize.sm,
      variant: RiseButtonVariant.outline,
      onPressed: () {},
    ),
  ],
  onClose: () {},
)

Without description

Title-only success state with close.

RiseAlert(
  status: RiseAlertStatus.success,
  title: const Text('Profile updated successfully'),
  onClose: () {},
)

Custom indicator

Loading state — [RiseSpinner] in the indicator slot (HeroUI custom indicator story).

RiseAlert(
  status: RiseAlertStatus.accent,
  leading: const RiseSpinner(
    size: RiseSpinnerSize.sm,
    color: RiseSpinnerColor.accent,
  ),
  title: const Text('Processing your request'),
  description: const Text('Please wait while we sync your data.'),
  onClose: () {},
)

Without close

No dismiss control — scheduled maintenance copy from HeroUI stories.

const RiseAlert(
  status: RiseAlertStatus.warning,
  title: Text('Scheduled maintenance'),
  description: Text('Services will be unavailable during this window.'),
)

With actions

Multiple buttons in the footer wrap.

RiseAlert(
  status: RiseAlertStatus.warning,
  title: const Text('Review required'),
  description: const Text('Multiple actions in a wrap row.'),
  actions: [
    RiseButton(
      label: 'Dismiss',
      size: RiseButtonSize.sm,
      variant: RiseButtonVariant.ghost,
      onPressed: () {},
    ),
    RiseButton(
      label: 'Open',
      size: RiseButtonSize.sm,
      variant: RiseButtonVariant.primary,
      onPressed: () {},
    ),
  ],
  onClose: () {},
)