Notification

Show a small popup notification to the user

Basic usage
Use the showNotification function to display a popup notification that clears in a few seconds.
tsx
Copied
1
<Button onClick={() => showNotification({ message: "I am a notification" })}>
2
  Click for notification
3
</Button>

Notification types
Use the type field to display a notification with a built in icon and color.
tsx
Copied
1
<Button
2
  color="success"
3
  onClick={() => showNotification({ message: "Something went right", type: "success" })}
4
>
5
  Success
6
</Button>
7
<Button
8
  color="error"
9
  onClick={() => showNotification({ message: "Something went wrong", type: "error" })}
10
>
11
  Error
12
</Button>

Customize the notification
Notifications can have an optional title and icon in addition to the required message.
tsx
Copied
1
<Button
2
  onClick={() =>
3
    showNotification({ message: "Message", title: "Title", icon: <AcademicCapIcon /> })
4
  }
5
>
6
  Click for notification
7
</Button>

API
icon
optional
Component

An icon on the left side of the notification.

message
optional
string

The message content of the notification.

title
optional
string

An optional title that appears above the message.

type
optional
Default
info
"info" | "success" | "error"

The type of the notification. Renders a specific icon and color combination.

PrivacyTermsSupport