Chakra-UI

I♥️Components

Alert

|

Chakra Docs

|

⦾The Alert component offered by Chakra UI is a versatile and accessible tool for giving user feedback based on interactions or conveying system statuses. This component enables swift communication of critical information to users, such as success, error, warning, or informational messages.

Alert components provide a high degree of adaptability and can be tailored to match the aesthetic theme of your application. You can adjust the look of the alert (solid orsubtle), the status or category of the alert (information,success, warning, or error), and the presence of a close button. All these aspects contribute to making the Alert component an essential instrument in improving the user experience of your application.

These are the main parts of an Alert component.

  • Alert: This is the container for the Alert components.
  • AlertIcon: This is the icon accompanying the alert, changing its appearance based on the status prop.
  • AlertTitle: This is the headline of the alert and it's read aloud by screen readers.
  • AlertDescription: This is the detailed explanation of the alert, which is also announced by screen readers.

To import these components:

Examples

General Usage

⦾ The alert below uses Alert, AlertIcon, AlertTitle, and AlertDescription. In Alert, the status is set to "error". And the rest is simple text input.

Code

Status

⦾ You can modify the status of the alerts by supplying a status prop. This adjustment will influence the color scheme and the icon utilized. The Alert supports statuses such as error, success, warning, and info. The following examples employ only the Alert and AlertIcon components.

Code

Code

Code

Code

Variants

⦾ Alert has 4 variant styles you can use. Pass the variant prop and use either subtle, solid, left-accent or top-accent.

Code

Code

Code

Code

Composition

⦾ There are numerous layouts possible with Alert. The following alert has these properties:

Code

Adding a Close Button

⦾ The Alert component can also integrate other elements from Chakra. Here's an illustration of an alert thaCloseButtonCloseButton component for straightforward closure functionality, along with text in the description that wraps:

Code

Did you know?

Creative Idea No. 2

Custom Alert Icon: you can replace the default AlertIcon with your own custom icon. This can be helpful for better aligning with the visual language of your application. Here's a simple that eplaces the default AlertIcon with a different icon from the "react-icons" library, which could be adjusted to any custom icon you prefer.

Code

Creative Idea No. 1

Embedding Links in Alerts: Alerts can contain more than just plain text; they can include hyperlinks as well. This is useful for directing users to more detailed information or related pages. In the following example, a link to the "documentation" page is added directly within the Alert's description.

Code

Creative Idea No. 3

Creating a Custom Alert Component: Instead of using the standard alerts provided by Chakra UI, you can create your own custom alert component. This component can integrate various styles and other Chakra UI components. Here's a simple example of how to create a custom "Message" alert component, which creates a custom Message that aligns content in the center (both horizontally and vertically), uses a laughing emoji as the AlertIcon, and can accept status and children props. The component could be adjusted to include other Chakra UI components or props, or additional formatting or behavior, to suit the needs of your application. The customizability of Chakra UI's components like Alert allows you to create bespoke elements like this to better align with the design and functionality requirements of your project.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.