PushSoftAsk

Asks in your own words before the browser's notification prompt appears.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import {  Button,  PushSoftAsk,  Row,  Stack,  Text} from '@kerf-js/veneer'export function Mentions() {  const said = state('')  return (    <Stack gap="related">      {said.value ? (        <Row gap="related">          <Text subtle>{said.value}</Text>          <Button            emphasis="ghost"            tone="neutral"            size="sm"            onClick={() => (said.value = '')}          >            Show it again          </Button>        </Row>      ) : (        <PushSoftAsk          title="Get a ping when a deploy fails?"          onAccept={() =>            (said.value =              'Your app would ask the browser now.')          }          onDismiss={() =>            (said.value =              'It will stay away for 30 days.')          }        >          Only failed deploys and approvals, on this          device. You can change it any time.        </PushSoftAsk>      )}    </Stack>  )}

Installation

npm install @kerf-js/veneer

Usage

tsx

import { PushSoftAsk } from '@kerf-js/veneer'

When to use

Use it for

After someone has seen why pings would help them, never on a first visit

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`title`	`unknown`	`'Get a ping when someone mentions you?'`	The question.
`children`	`unknown`	`'Only mentions and approvals, on this device. You can change it any time.'`	What they would get.
`declined`	`string`	`"Okay. We won't ask again for 30 days."`	Announced after Not now.

Event	Type	Default	Description
`onAccept`	`() => void`	—	Call `Notification.requestPermission()` here.
`onDismiss`	`(() => void)`	—	Not now.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="push-ask"] [data-part="mark"]

markactions

RelatedNotification preferences