PushSoftAsk

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

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, PushSoftAsk, Row, Stack, Text } from '@weft-js/warp'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 @weft-js/warp

Usage

tsx

import { PushSoftAsk } from '@weft-js/warp'

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 warp'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