DesktopNotification

Side-effect-free native notification preview and explicit host request control.

All components · Theme builder · Implementation source

Live preview

Native actions require a desktop host. This browser preview shows the shipped surface with host actions disabled.

Install

Shell

netscript ui:add desktop-notification

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { DesktopNotification } from '@app/components/ui/desktop-notification.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><DesktopNotification disabled notification={ {title:"Order shipped",body:"SO–10480 is on its way"} } /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`DesktopNotificationProps`	`notification`	`DesktopNotificationRequest`	No	Notification options passed unchanged to the desktop controller.
`DesktopNotificationProps`	`onRequest`	`(notification: DesktopNotificationRequest) => void`	Yes	Receives the request after an explicit user action.
`DesktopNotificationProps`	`disabled`	`boolean`	Yes	Disable requests when notifications are unavailable.
`DesktopNotificationProps`	`class`	`string`	Yes	Additional root class name.

Keyboard

Key	Action
`Tab/Shift+Tab`	Move between native controls
`Enter/Space`	Activate focused button; links use Enter

Tokens

Semantic contract roles: space/stack/gap, text/muted.

CSS custom properties referenced directly: --ns-accent, --ns-border, --ns-border-width, --ns-card-padding, --ns-control-height-sm, --ns-control-padding-x-sm, --ns-ease-fast, --ns-fg, --ns-focus-ring-offset, --ns-focus-ring-width, --ns-font-sans, --ns-leading-body, --ns-leading-small, --ns-leading-strong, --ns-muted, --ns-muted-fg, --ns-radius-card, --ns-radius-control, --ns-radius-input, --ns-radius-lg, --ns-radius-md, --ns-ring, --ns-selected, --ns-shadow-sm, --ns-size-avatar-md, --ns-space-1, --ns-space-10, --ns-space-2, --ns-space-3, --ns-space-4, --ns-state-disabled-opacity, --ns-surface, --ns-surface-raised, --ns-text-body, --ns-text-sm, --ns-text-small, --ns-text-strong, --ns-tracking-body, --ns-tracking-small, --ns-tracking-strong, --ns-weight-body, --ns-weight-small, --ns-weight-strong.

Contract and compatibility

Accessibility pattern: native buttons and links

Native DOM attributes pass through where the implementation accepts them.
Compatibility values describe already-shipped headless or Utility state hooks. They are separate from the settled canonical design vocabulary and must be retained by styles serving these public APIs.

Design contract values marked planned are not implementation props. The props above describe what ships today.