Alert Component

The Alert component in the Arts Oven UI Component Library is designed to provide contextual feedback to users through brief messages. Alerts are an effective way to communicate important information without interrupting the user’s workflow.

Alert

Alert with Icon

Branding Alerts

Outline Alert

Outline Alert Branding

Alert with Action

Customizing with CSS Variables

You can customize the appearance of the component using following CSS variables.

:root {
    /* Alert text color */
    --alert-text-color: #FFFFFF;
    /* Alert border width & style */
    --alert-border: 1px solid;
    /* Alert border radius */
    --alert-border-radius: 0.375rem;
}

Refer to the Customization Guide to learn more about how to use these variables to customize the components.

Adding Shadows and Gradients

You can enhance your buttons with shadows and gradients by enabling these features in your tailwind.config configuration:

artsovenui: {
    shadow: true,
    gradients: true,
},

Refer to the Configuration Guide to learn more about how to set up and customize the components according to your project’s needs.

Contribute ideas!

Share Your Ideas! While we can’t guarantee that every request will be added, we will definitely consider your suggestions for future updates.

On this page