We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Alert

Alerts are crucial UI elements used to convey important messages to users. They serve as a way to display notifications, warnings, confirmations, or error messages in an application.

Basic alert

Preview

Code

You have a new message

Optional properties

Use the properties below to style the alert and copy the code to your project. Try clicking on them.

Property	Type	Description
`type`	`success` \| `warning` \| `error` \| `info` \| `default`	Defines the alert type. `success` is a green alert, `warning` is a yellow alert, `error` is a red alert, `info` is a blue alert, and `default` is the standard alert.
`shape`	`flat` \| `pill` \| `curve`	Defines the alert's shape. `pill` is a fully rounded alert, `curve` has rounded corners, and `flat` is a classic square-cornered alert. Default is `flat`.
`variant`	`default` \| `outlined`	Defines the alert's variant. `outlined` is a bordered alert, and `default` is a standard alert.
`icon`	string	Specifies a Font Awesome class for the alert's icon (e.g., `fa-send`).
`zapClass`	string	Allows overriding default styles by passing Tailwind CSS classes. Utilize the `@zaplib/zapui/tailwind` plugin to target specific elements within the alert component.

Error alert with icon and custom text

Preview

Code

There is an issue with:

Saving the document
Sending the email

Supported directives

Selector	Directive name	Description
`zapIcon`	ZapIconDirective	A directive that enables adding any type of icon to a alert, including SVGs, font-based icons, and more.

Example

Preview

Code

You have a new message

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider.. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Shape and Size

Property	Description
`shape`	Defines the shape of the alert. Can be `flat`, `curve`, or `pill`.

Colors

You can provide each of these colors for different themes that you use

Property	Description
`bgColor`	Background color of the alert.
`textColor`	Text color of the alert.
`borderColor`	Border color of the alert.
`dismissColor`	Color of the dismiss icon
`dismissHoverColor`	Color of the dismiss icon when hovered

Other styles

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`borderRadius`	Defines the radius of the alert's corners.
`paddingLeft`	Left padding of the alert.
`paddingRight`	Right padding of the alert.
`paddingTop`	Top padding of the alert.
`paddingBottom`	Bottom padding of the alert.
`padding`	Padding around the alert's content.
`width`	Width of the alert.
`height`	Height of the alert.
`fontSize`	Font size of the alert's text.
`fontWeight`	Font weight of the alert's text.
`lineHeight`	Line height of the alert's text.
`letterSpacing`	Letter spacing of the alert's text.
`textTransform`	Transforms the alert's text (e.g., uppercase, lowercase).