Push notification

01Preview

Switch the platform, appearance, expanded state and copy length. Tap the notification or an action to see what it would do.

import { PushNotification } from '@nuton/ui'

<PushNotification
  title="Section 3 is ready"
  body="Pick up Form and Function where you left off. About 8 minutes."
  time="7:30 pm"
  actions={['Start section', 'Tomorrow']}
  onOpen={openSection}
  onAction={runAction}
/>

02Installation

pnpm add @nuton/ui @nuton/tokens @remixicon/react

npm install @nuton/ui @nuton/tokens @remixicon/react

yarn add @nuton/ui @nuton/tokens @remixicon/react

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { Nuri, PushNotification } from '@nuton/ui'

<PushNotification
  title="Section 3 is ready"
  body="Pick up Form and Function where you left off. About 8 minutes."
  time="7:30 pm"
  onOpen={() => router.push('/lessons/form-and-function/3')}
/>

• Write for the system surface: a short title, one line, and (for a badge, a milestone or a welcome back) a small art image. Nothing is tinted or restyled, so people recognise it as a notification.
• The app icon is the identity. Use art sparingly: Nuri beside a reward or a welcome, never on every notification.
• Set appearance to the phone's mode, not the app's theme. A phone in dark mode shows dark notifications whatever the app is set to.
• Use platform="android" for Android. It is a different design (app row, one-line body, actions on the notification), not the iPhone one redrawn.
• Use LiveActivity only when the time left or the progress is itself the message: a streak countdown, a lesson in progress. A reminder, a badge or a recap stays an ordinary notification.
• Put notifications inside a PushPhone to judge them where people see them: the iPhone Lock Screen, another app, or the Android shade, at the device's real proportions. Notifications inside follow its platform and appearance.
• Scale it by setting --nu-push-u (one point) on an ancestor. The default is one CSS pixel, which is the real device size.

04Variants and sizes

Sizes are real device sizes: iOS points and Android dp, on an iPhone 16 (393 × 852 pt) and a Pixel (412 × 915 dp). The previews are scaled to fit this column.

iPhone

26 radius, 14 padding, a 38 app icon (9 radius). The title is 15 semibold, up to two lines; the line is 15/20, up to three; the time is 13. Expanded (touch and hold) is a 28 radius card with a 30 icon and 17/22 text, and the actions sit in their own 22 radius list.

<PushNotification title="12 cards are ready" body="A 3-minute review keeps what you learned fresh." time="12:10 pm" />

<PushNotification
  title="New badge: First Flashcard Session"
  body="You finished your first review. See it in your collection."
  time="4:41 pm"
  art={<Nuri size={32} crop="head" decorative animated={false} />}
/>

<PushNotification expanded title="Section 3 is ready" body="Pick up Form and Function where you left off." time="7:30 pm"
  actions={['Start section', 'Tomorrow']} />

Android

28 radius (6 where grouped), 16 and 18 padding, a 20 app icon in the app row, a 48 image (12 radius). The title is 16 medium on one line; the line is 14/20, one line collapsed and up to four expanded. Actions are 36 tall pills. A group is a shared header with the corners rounded as the system rounds them.

<PushNotification platform="android" title="12 cards are ready" body="A 3-minute review keeps what you learned fresh." time="12:10 pm" />

<PushNotification platform="android" expanded title="Section 3 is ready" body="Pick up Form and Function where you left off." time="7:30 pm"
  actions={['Start section', 'Tomorrow']} onToggle={toggle} />

<PushNotification platform="android" group="first" … />
<PushNotification platform="android" group="middle" … />
<PushNotification platform="android" group="last" … />

Live Activity

28 radius, dark in either appearance, as on iOS. The title is the one large element (50 bold; 38 for a success state like “Streak safe”; 30 with a track), never wraps and is cut with an ellipsis rather than overlap the icon; the note is one short sentence (17/22); the app icon is 76 (56 beside a track). status turns the title red for the last hour or green once the goal is met.

<LiveActivity label="12" labelIcon={<RiFireLine />} title="2:00:45" note="Your 12-day streak is still within reach." />
<LiveActivity label="12" labelIcon={<RiFireLine />} title="0:50:01" status="urgent" note="One section is enough." />
<LiveActivity label="12" title="Streak safe" status="success" note="See you tomorrow." />
<LiveActivity title="6 min left" note="Form and Function" chip="3 of 6" progress={0.5}
  marker={<Nuri size={32} crop="head" decorative animated={false} />} />

Phone

The device and the system surface around a notification: the iPhone Lock Screen (date, clock, flashlight and camera), another app being used (where a banner drops in), the touch-and-hold backdrop, and the Android notification shade with quick settings. It fills its container, keeps the device's real proportions and scales everything in it, so a notification inside is the size it is on the device. The status bar, wallpaper and quick settings are decoration, hidden from assistive technology; what you put inside is real.

<PushPhone label="iOS Lock Screen" time="21:59">
  <LiveActivity label="12" title="2:00:45" note="Your 12-day streak is still within reach." />
  <PushNotification title="12 cards are ready" body="A 3-minute review keeps what you learned fresh." time="12:10 pm" />
</PushPhone>

<PushPhone screen="app" label="iOS banner over another app">
  <PushNotification title="Section 3 is ready" body="…" time="now" onOpen={open} />
</PushPhone>

<PushPhone dimmed label="iOS expanded notification">
  <PushNotification expanded title="Section 3 is ready" body="…" actions={['Start section', 'Tomorrow']} />
</PushPhone>

<PushPhone platform="android" label="Android notification shade">
  <PushNotification group="first" … />
  <PushNotification group="last" … />
</PushPhone>

Phone sizes

Three sizes per platform, in the device's own points (iPhone) or dp (Android), for checking how a notification truncates and wraps: iPhone 375 × 812, 393 × 852 (the iPhone 16) and 440 × 956; Android 360 × 800, 412 × 915 (a Pixel) and 600 × 960. The previews below are drawn at one width on the page, so the larger devices show the same notification smaller, as they would on a screen.

<PushPhone size="compact" label="iPhone compact">…</PushPhone>
<PushPhone size="standard" label="iPhone 16">…</PushPhone>
<PushPhone size="large" label="iPhone large">…</PushPhone>

Colours and contrast

These are the system's surfaces, so they use the colour primitives and follow the phone's appearance, not the Nuton theme. Contrast was computed from the token values, against the lightest background each can sit on.

The tests run axe in jsdom, which cannot check contrast, so the figures above are computed, not measured in a browser.

05States and interactions

When the copy is long

State tokens

Set on .nu-push and .nu-live: --nu-push-u (one point; scale the whole notification), --nu-push-text, --nu-push-sub, --nu-push-surface, --nu-push-solid, --nu-push-hair, --nu-push-chip and --nu-push-accent. The dark values are set by data-appearance="dark".

06Composition examples

A stack that opens

The component draws one notification. A stack, Show Less and Clear are the screen's own controls, and each notification reports its tap with onOpen.

{open
  ? items.map((s) => <PushNotification key={s.id} title={s.title} body={s.body} time={s.time} onOpen={() => open(s)} />)
  : <PushNotification title={items[0].title} body={items[0].body} time={items[0].time} onOpen={() => setOpen(true)} />}
<Button onClick={() => setOpen(false)}>Show less</Button>
<Button onClick={() => setItems([])}>Clear</Button>

The full set of Nuton learning notifications, drawn on both platforms with the rules for when each is sent, is in the notification review at /design-exploration/notifications/.

07API reference

Props

Accessibility

You must: keep the title and line meaningful on their own, because the system may truncate them, and make sure the destination exists when the notification is tapped.

Figma mapping

There is no Figma frame for this component. It was designed in code from the owner's two references and reviewed on device sizes; Figma stays read-only.

08Guidelines and related components

Do and don't

Related components

• AlertA message inside the page, next to what it is about.
• ToastA brief confirmation after an action, inside the app.
• NuriThe mascot used for the small image.