ApprovalCard

Tier: clientUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { ApprovalCard } from '@nizivo/react/unstable/approval-card';

export function ApprovalCardExample(): JSX.Element {
  return (
    <div style={{ maxInlineSize: 480 }}>
      <ApprovalCard
        title="Send 3 emails to customers?"
        confirmLabel="Send emails"
        autoFocus={false}
        summary={
          <>
            <span>To: 3 customers whose orders shipped late</span>
            <span>Subject: Your order is on its way</span>
          </>
        }
      >
        Each gets a short apology and a 10 % code. Sent emails cannot be unsent.
      </ApprovalCard>
    </div>
  );
}

import type { JSX } from 'react';
import { ApprovalCard } from '@nizivo/react/unstable/approval-card';

export function ApprovalCardEditFirstExample(): JSX.Element {
  return (
    <div style={{ maxInlineSize: 480 }}>
      <ApprovalCard
        title="Send 3 emails to customers?"
        confirmLabel="Send emails"
        autoFocus={false}
        onEdit={() => {}}
        summary={
          <>
            <span>To: 3 customers whose orders shipped late</span>
            <span>Subject: Your order is on its way</span>
          </>
        }
      >
        Each gets a short apology and a 10 % code. Sent emails cannot be unsent.
      </ApprovalCard>
    </div>
  );
}

ImportCopy Anchor Link

import { ApprovalCard } from '@nizivo/react/unstable/approval-card';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/ai-badge.css and @nizivo/react/css/base.css and @nizivo/react/css/button.css
import '@nizivo/react/css/approval-card.css';

Static or interactiveCopy Anchor Link

Client. It moves focus to Cancel when it appears and cancels on Escape. How to choose.

ContentCopy Anchor Link

title is the action ("Send 3 emails to customers?"), the children say what will happen and what cannot be taken back, and summary sets out the details (the recipients, the subject, the amount). confirmLabel names the action ("Send emails"), never "OK". onEdit adds an "Edit first" button. pending shows the confirm in flight.

FocusCopy Anchor Link

As the design asks, focus lands on Cancel when the card mounts, without scrolling (autoFocus={false} turns that off, for a card rendered with the page rather than in answer to the reader), and Escape anywhere in the card calls onCancel. It is a section named by its title, not a modal: the conversation stays readable around it. headingLevel (3 by default) fits it into the page outline.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

ApprovalCardLabels type

import type { ApprovalCardLabels } from '@nizivo/react/unstable/approval-card'

ApprovalCard's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
badgerequired	string	'Needs your approval'	The badge over the title.
cancelrequired	string	'Cancel'
editrequired	string	'Edit first'

ApprovalCardProps type

import type { ApprovalCardProps } from '@nizivo/react/unstable/approval-card'

The props of ApprovalCard, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-approval-card, .nz-approval-card-actions, .nz-approval-card-body, .nz-approval-card-summary, .nz-approval-card-title.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• approval-card-action: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.