Components
Alert
A prominent message that informs users about important events or status changes.
Info Alert
This is an information alert
Success Alert
This is a success alert
A little bit of a content here
Warning Alert
This is a warning alert
Error Alert
This is an error alert
Props
Name | Type | Default | Description |
---|---|---|---|
type | AlertType | Required | The type of alert to display. One of: 'info', 'success', 'warning', 'error' |
title | string | - | The title of the alert. If provided, it will be displayed prominently. |
children | ReactNode | - | The content of the alert. Can be text or JSX. |
isDismissible | boolean | false | If true, shows a dismiss button to close the alert. |
className | string | - | 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.