Alerts & notifications

React v2

One documentation subject with separate package-backed runtimes: persistent page alerts, notification cards, and a governed toast queue with accessible announcements.

Demo

hero

Your trial ends in 3 days

Upgrade to keep your team’s projects and their history.

Component
size
color
import { AlertFloating } from "@parentsquare/squarekit-react-v2/alerts"; <AlertFloating title="Your trial ends in 3 days" description="Upgrade to keep your team’s projects and their history." confirmLabel="Upgrade now" color="warning" onClose={() => {}} onConfirm={() => {}} />

In context

in-context
View in a page

Family

family
AlertFloating
AlertFullWidth
IconNotification
AvatarNotification
ImageNotification

Types

cells

The kit’s five, each at its default; the sheet’s Type names.

Alerts

The dashboard view has changed

Pages and exports now load in about half the time.

AlertFloating

The dashboard view has changed

Pages and exports now load in about half the time.

AlertFullWidth, actionType button

The dashboard view has changed

Pages and exports now load in about half the time.

AlertFullWidth, actionType link

Notifications

Version 1.4.1 is now available

Includes the all new dashboard view. Pages and exports will now load faster.

IconNotification: the sheet’s Gray icon

Updates have been made to your profile

Your team has made changes to your company profile since you last logged in.

IconNotification, icon null: the sheet’s No icon

Uploading ‘website-FINAL06.fig’

Please wait while we upload your file.

60% uploaded...
IconNotification, progress: the sheet’s Progress indicator

Katherine Moss

I’ve finished adding my notes. Happy for us to review whenever you’re ready.

AvatarNotification: the sheet’s Avatar

We’ve just released a new update

Check out the all new dashboard view. Pages and exports now load faster.

ImageNotification: the sheet’s Image, its own width

Tones

cells

Six colors on the three components that take one.

AlertFloating

The dashboard view has changed

Pages and exports now load in about half the time.

color default

Scheduled exports are now available

Send any report to your team on a weekly or monthly loop.

color brand

This project is read-only

You have view access. Ask an admin for edit access.

color gray

We couldn’t publish this project

Removing the last member unpublished it. Add a member first.

color error

Your trial ends in 3 days

Upgrade to keep your team’s projects and their history.

color warning

Profile updated

Your changes are saved and your team can see them.

color success

AlertFullWidth

The dashboard view has changed

Pages and exports now load in about half the time.

color default

Scheduled exports are now available

Send any report to your team on a weekly or monthly loop.

color brand

This project is read-only

You have view access. Ask an admin for edit access.

color gray

We couldn’t publish this project

Removing the last member unpublished it. Add a member first.

color error

Your trial ends in 3 days

Upgrade to keep your team’s projects and their history.

color warning

Profile updated

Your changes are saved and your team can see them.

color success

IconNotification

Version 1.4.1 is now available

Includes the all new dashboard view. Pages and exports will now load faster.

color default: the sheet’s Gray icon

We’ve just released a new update

Check out the all new dashboard view. Pages and exports now load faster.

color brand: the sheet’s Primary icon

Autosave is paused

Reconnect to keep editing. Changes stay on this device.

color gray: kit extra, no sheet symbol

This project has been unpublished

Removing all users has unpublished this project. Add users to republish.

color error: the sheet’s Error icon

This project has been unpublished

Removing all users has unpublished this project. Add users to republish.

color warning: the sheet’s Warning icon

Successfully updated profile

Your changes have been saved and your profile is live. Your team can make edits.

color success: the sheet’s Success icon

Layouts

cells

The sheet’s Mobile breakpoint, each in a real phone-width viewport.

Mobile breakpoint

AlertFloating at phone width: icon above the text
AlertFullWidth at phone width: no icon, stacked buttons, confirm on top
AlertFullWidth link at phone width: links on one line
IconNotification at phone width: icon above the text, full width

Content

cells

We couldn’t publish this project because its last remaining member was removed

Removing the last member unpublished it. Add a member first.

AlertFloating, a long title wraps

Successfully updated profile

Your changes are saved and your profile is live. Everyone on the team can see them now and make their own edits from the settings page.

IconNotification, a long description wraps

Your trial ends in 3 days

Upgrade to keep your history.

AlertFullWidth, the description beside the title
AlertFullWidth below lg, the description under the title

States

cells

No state of their own: the handlers decide what renders.

Handlers on an alert

Scheduled exports are now available

Send any report to your team on a weekly or monthly loop.

onClose and onConfirm: hover and focus each control

Scheduled exports are now available

Send any report to your team on a weekly or monthly loop.

no onClose: no dismiss action, no corner button

Scheduled exports are now available

Send any report to your team on a weekly or monthly loop.

no onConfirm: no confirm action

Dismiss on a toast

We’ve just released a new update

Check out the all new dashboard view. Pages and exports now load faster.

onClose: Dismiss text and the corner button

We’ve just released a new update

Check out the all new dashboard view. Pages and exports now load faster.

hideDismissLabel: the corner button alone

We’ve just released a new update

Check out the all new dashboard view. Pages and exports now load faster.

no onClose: no dismiss control at all

Progress

Uploading ‘website-FINAL06.fig’

Please wait while we upload your file.

0% uploaded...
progress 0

Uploading ‘website-FINAL06.fig’

Please wait while we upload your file.

60% uploaded...
progress 60

Uploading ‘website-FINAL06.fig’

Please wait while we upload your file.

100% uploaded...
progress 100