AstraUI

Components

Alert

A prominent message that informs users about important events or status changes.

Info Alert

Success Alert

Warning Alert

Error Alert

Props

NameTypeDefaultDescription
typeAlertTypeRequiredThe type of alert to display. One of: 'info', 'success', 'warning', 'error'
titlestring-The title of the alert. If provided, it will be displayed prominently.
childrenReactNode-The content of the alert. Can be text or JSX.
isDismissiblebooleanfalseIf true, shows a dismiss button to close the alert.
classNamestring-Additional CSS classes to apply to the alert container.

Best Practices

  • Use appropriate alert types: Choose the correct type based on the message importance and context.
    • Info: For general information or updates
    • Success: To confirm a task has been completed successfully
    • Warning: For potential issues or important notices
    • Error: For critical problems or failures
  • Keep content concise and actionable. Write clear, brief messages that users can quickly understand and act upon. Avoid unnecessary details.
  • Use dismissible alerts judiciously. Make alerts dismissible when the information is not critical and users might want to remove it from view.
  • Provide context and next steps. When appropriate, include guidance on what the user should do next or how to resolve an issue.
  • Placement matters. Position alerts where they are easily noticeable but don‘t obstruct important content or actions.