Components

Notification preferences

What reaches a person: categories down, channels across, a switch at each crossing, presets that set it all at once, a locked row for what cannot be turned off (security).

Web · ✓Mobile · ✗ to buildDesktop · ✓BetaForms

import { NotificationPreferences } from "@krizaka/ui/notification-preferences";

In the app only, nothing by e-mail.

	In the app	By e-mail
Followers and repliesSomeone follows you or answers.
MessagesA new message in a conversation.
EarningsA sale, a tip, a payout.
SecurityAlways on: sign-ins and password changes.

Web only — React, from @krizaka/ui/notification-preferences. Beta: its API may still change in a minor version.

Mobile · ✗ to build. On a phone one switch per category in a SettingsGroup already does the job (a notifications screen); the matrix is a computer's idea. issue #275

Why it is here. Akinaza's and Yomizaka's account baseline (notifications) (krizaka-ui#515).

When to use

The notifications part of an account page, where the product sends in the app and by e-mail.
Any choice of several kinds of message over several channels.

When not to use

One kind of message, one channel.Use instead: Switch
A single setting with a label and help.Use instead: Settings layout

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { NotificationPreferences } from "@krizaka/ui/notification-preferences";

Examples

Categories and channels

Four categories over the app and e-mail, three presets, security locked on.

In the app only, nothing by e-mail.

	In the app	By e-mail
Followers and repliesSomeone follows you or answers.
MessagesA new message in a conversation.
EarningsA sale, a tip, a payout.
SecurityAlways on: sign-ins and password changes.

Props

Prop	Type	Default	Description
`categories`required	`readonly NotificationCategory[]`	—	The rows: what can be sent.
`channels`required	`readonly NotificationChannel[]`	—	The columns: where a notification can go.
`label`required	`string`	—	The group's accessible name (`Notification settings`).
`onValueChange`required	`(next: NotificationMatrix) => void`	—	Called with the whole matrix after a switch or a preset — normalised: locked rows on, inert channels unchanged, unused crossings absent.
`value`required	`NotificationMatrix`	—	What is on, by category then channel (controlled).
`className`	`string`	—	Classes merged on the root.
`customHint`	`string`	—	Said under the presets when the matrix matches none (`Custom`).
`presets`	`readonly NotificationPreset[]`	—	Quick settings above the matrix (`Everything`, `Essentials`, `Nothing`).
`presetsLabel`	`string`	—	The presets' own accessible name (`Presets`). Required with `presets`.

Accessibility

A real table: channels are column headers, categories are row headers.
Each switch is named « Category — Channel ».

Keyboard

Keys	Action
`Tab, Space`	Each switch is a stop; the presets are a group with arrow keys.

Best practices

Keep the value as plain data and save at once, as SettingsSection does.
Offer presets: most people want « everything » or « essentials », not twelve switches.
Show the security row locked on, with the reason, instead of hiding it.
Disable a whole channel (disabled) when it is off for the account, and say why next to the table.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub

Kind config editor

OTP input