AiBadge

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { AiBadge } from '@nizivo/react/unstable/ai-badge';

export function AiBadgeExample(): JSX.Element {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <AiBadge />
      <AiBadge variant="solid" />
    </div>
  );
}

import type { JSX } from 'react';
import { AiBadge } from '@nizivo/react/unstable/ai-badge';

export function AiBadgeLabelExample(): JSX.Element {
  return (
    <p style={{ display: 'flex', gap: 8, alignItems: 'center', margin: 0 }}>
      Hand-thrown stoneware, glazed in small batches.
      <AiBadge labels={{ label: 'Edited with AI' }} />
    </p>
  );
}

ImportCopy Anchor Link

import { AiBadge } from '@nizivo/react/unstable/ai-badge';

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

Static or interactiveCopy Anchor Link

Server. No client JavaScript. How to choose.

Where it goesCopy Anchor Link

Put it next to the content it describes, never as decoration: under a generated product description, beside an edited caption, in an answer's header. variant="subtle" (the default) is for text on a page; variant="solid" stands out over busier surfaces. Lime (bg/accent) marks AI in Nizivo and nothing else.

WordsCopy Anchor Link

It says "AI generated". Pass children, or labels={{ label: 'Edited with AI' }}, to say something more exact. The sparkles mark is decorative; the words carry the meaning.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

AiBadgeLabels type

import type { AiBadgeLabels } from '@nizivo/react/unstable/ai-badge'

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

Name	Type	Default	Description
labelrequired	string	'AI generated'	The text when the badge has no children.

AiBadgeProps type

import type { AiBadgeProps } from '@nizivo/react/unstable/ai-badge'

The props of AiBadge, 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-ai-badge, .nz-ai-badge-icon, .nz-ai-badge-label.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.