daisyUI Kit 🌼

Alert

Display a message to the user. Bring your own icons.

Code Example 
<Alert>
  <Icon name="feather:info" style="color: #2196f3" class="w-6 h-6 mr-2" />
  <label>Lorem ipsum dolor sit amet, consectetur adip!</label>
</Alert>

Components

Alert is a standalone component.

Alert

Alert's props are all related to setting its type.

PropTypeDescription
type
string
Allows setting the type to one of the below values.
   
info
boolean
Sets the type to info.
   
success
boolean
Sets the type to success.
   
warning
boolean
Sets the type to warning.
   
error
boolean
Sets the type to error.

Type

Alert's type conveys meaning to the user through consistent color.

Code Example 
<Alert info>
  <Icon name="feather:info" class="w-6 h-6 mr-2 text-info" />
  <label>info: Lorem ipsum dolor sit amet, consectetur adip!</label>
</Alert>

Close Button

You can supply your own close button.

Code Example 
<Alert info class="gap-2">
  <Icon name="feather:info" class="w-6 h-6" />
  <label class="flex-grow"><b>info:</b> Lorem ipsum dolor sit amet, consectetur adip!</label>
  <Button ghost circle sm>
    <Icon name="feather:x" class="w-4 h-4" />
  </Button>
</Alert>

Title and Description

New message!

You have 1 unread message
Code Example 
<Alert class="shadow-lg">
  <Icon name="feather:mail" class="w-6 h-6 mr-2 text-info" />
  <Flex col>
    <Text is="h3" bold>
      New message!
    </Text>
    <Text xs>
      You have 1 unread message
    </Text>
  </Flex>
  <Button sm info>
    View
  </Button>
</Alert>

Note about Styling

The Alert component is kept simple on purpose. It allows you to style it to work for your app. For example, by default, it is not full-width. Just like everything with DaisyUI, you can use TailwindCSS classes to style components. To make it full-width, add class="w-full".