ZuzJS UI

ZuzJS

UI

v1.0.71

⌃K

Concepts

Overview

Composition

Layout

Accordion

Alert

Auto Complete

Avatar

Badge

Box

Button

Calendar

Chart

ChatBubble

ChatList

Checkbox

ColorScheme

ContextMenu

CookiesConsent

Cover

Cropper

Crumb

DatePicker

Dialog

Drawer

Fab

Filters

Form

Group

Icon

Image

Input

KeyboardKeys

Label

List

NetworkStatus

Overlay

Pagination

Password

PinInput

ProgressBar

Radio

ScrollView

Slider

Search

SelectTabs

Select

Sheet

Slider

Span

Spinner

Switch

Table

TabView

Text

TextArea

TextWheel

Toast

Tooltip

Treeview

On this page

  • Overview
  • Basic Anatomy

Alert

Documentation for Alert component

This is an Error Alert

This is an example of an alert component. You can use it to display important messages to the user.

This is an Info Alert

This is an example of an alert component. You can use it to display important messages to the user.

This is an Success Alert

This is an example of an alert component. You can use it to display important messages to the user.

This is an Warning Alert

This is an example of an alert component. You can use it to display important messages to the user.

1 <Alert
2 title={"This is an Alert"}
3 message={"This is an example of an alert component. You can use it to display important messages to the user."}
4 type={ALERT.Error}
5 icon="error">Warning: Please review the details</Alert>
6 <Alert
7 title={"This is an Alert"}
8 message={"This is an example of an alert component. You can use it to display important messages to the user."}
9 type={ALERT.Info}
10 icon="information">Warning: Please review the details</Alert>
11 <Alert
12 title={"This is an Alert"}
13 message={"This is an example of an alert component. You can use it to display important messages to the user."}
14 type={ALERT.Success}
15 icon="seal-check">Warning: Please review the details</Alert>
16 <Alert
17 title={"This is an Alert"}
18 message={"This is an example of an alert component. You can use it to display important messages to the user."}
19 type={ALERT.Warning}
20 icon="warning">Warning: Please review the details</Alert>

Usage

import { Alert, type ALERT } from "@zuzjs/ui"
<Alert
title={`This is an Error Alert`}
message={`This is an example of an alert component. You can use it to display important messages to the user.`}
type={ALERT.Error}
icon="error">Warning: Please review the details</Alert>

Props

Prop
Type
Required
Description
type
ALERT
No
Component or input type
dismissible
—
—
dismissible prop
onDismiss
—
—
Callback function triggered on dismissal
icon
string
No
Icon identifier
ZuzProps
—
—
Shared base props