Inline confirmation

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Confirm a lightweight action, such as resetting filters, before it runs. Compose it from Popover and Button. There's no standalone export.

Don't use it for high-risk actions, such as deleting or changing permissions. Use AlertDialog instead.

Anatomy

Popover + description + cancel / confirm Button

Keyboard and accessibility

Focus, Escape, and focus restoration work as in Popover.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Popover, Button } from '@surflane/ui'

// Compose Popover + Button; no standalone Confirm export.
<Popover.Root open={open} onOpenChange={setOpen}>
  <Popover.Trigger render={<Button />}>Reset filters</Popover.Trigger>
  <Popover.Content>
    <Popover.Title>Reset filters?</Popover.Title>
    <Popover.Description>Restore default filters.</Popover.Description>
    <Popover.Close render={<Button />}>Keep filters</Popover.Close>
    <Button onClick={reset}>Reset filters</Button>
  </Popover.Content>
</Popover.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens