Basic
Action completed successfully
Action completed successfully, closeable
Action completed successfully, prevent default
Description
This component is used to display an alert. An alert is a message that informs the user about the status of an action or a system.
You can use icons with the icon component, the library will take care of the spacing between the icon and the text and the icon size.
API
View the default configuration for this component. Learn more about global configuration.
import { LuiAlertModule } from '@lqvrent-workspace/lqvrent-ui/alert';<lui-alert luiMessage="Action completed successfully"></lui-alert>lui-alert
| Property | Description | Type | Default |
|---|---|---|---|
[luiColor] | Color of the alert. Can take a tailwind color (ex: indigo) or any input accepted by LuiColor | ColorInput | defined in config |
[luiMessage] | Main content of alert | string | TemplateRef<void> | - |
[luiDescription] | Additional content of alert | string | TemplateRef<void> | - |
[luiIcon] | Custom icon | TemplateRef<void> | - |
[luiCloseable] | Allows to close the alert | boolean | defined in config |
[luiCloseContent] | Replace default close icon by string or template | string | TemplateRef<void> | - |
[luiExtraContent] | Extra content on the right of the alert | TemplateRef<void> | - |
[luiAriaLabelClose] | aria-label attribute for close alert button | string | 'Close alert' |
(luiOnClose) | Emitted when close button is clicked. You can use preventDefault on the event. | EventEmitter<MouseEvent> | - |
More examples
Default palette
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
With description
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
Closeable
Action completed successfully, Neutral
Action completed successfully, Red
Action completed successfully, Orange
Action completed successfully, Yellow
Action completed successfully, Green
Action completed successfully, Blue
Action completed successfully, Purple
Action completed successfully, Pink
Closeable w/ description
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
Custom close text
Action completed successfully, Neutral
Action completed successfully, Red
Action completed successfully, Orange
Action completed successfully, Yellow
Action completed successfully, Green
Action completed successfully, Blue
Action completed successfully, Purple
Action completed successfully, Pink
Custom close icon
Action completed successfully, Neutral
Action completed successfully, Red
Action completed successfully, Orange
Action completed successfully, Yellow
Action completed successfully, Green
Action completed successfully, Blue
Action completed successfully, Purple
Action completed successfully, Pink
Extra content
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
Custom color
Action completed successfully, #4f46e5
Action completed successfully, #4f46e5
Action completed successfully, #4f46e5
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
This action was really important, so we wanted to make sure you know about it.
Icons
Action completed successfully
This action was really important, so we wanted to make sure you know about it.
The action failed to complete
Oh no! Something went wrong and we couldn't complete the action.
Something happened, but it's not a big deal
This is just a heads up to let you know about something that happened.
You should know about this
Did you know that this is a really important piece of information?