Components/Marketing/CalloutStripe

CalloutStripe

Marketing

Thin horizontal banner — six tones for announcements, status, warnings.

Horizontal one-line banner for announcements, status messages, and upsells. Six tones cover the full range: signal (neutral), accent (Neo Green), raised (slate), warning, critical, ghost.

Usage

import { CalloutStripe, Anchor } from "nosible-ux"

export default function Example() {
  return (
    <CalloutStripe
      tone="accent"
      eyebrow="NEW"
      title="Shipping updates for v1.1 are live"
      action={<Anchor href="/changelog">Read →</Anchor>}
    />
  )
}

Examples

All tones

SIGNAL

Short, one-line message for the reader.

ACCENT

Short, one-line message for the reader.

RAISED

Short, one-line message for the reader.

WARNING

Short, one-line message for the reader.

CRITICAL

Short, one-line message for the reader.

GHOST

Short, one-line message for the reader.

With icon

NEW

v1.1 ships automated thesis summaries for every watchlist

Accessibility

Rendered with role="region". For critical warnings, pair with an aria-live="polite" container if the banner appears dynamically.

Props

Name	Type	Default	Description
`action`	`ReactNode`	—	Trailing CTA — typically a `<Button>`.
`asChild`	`boolean \| undefined`	—	When true, merges styles onto the child element instead of rendering a `<section>`.
`description`	`ReactNode`	—	Optional supporting copy after the title.
`eyebrow`	`ReactNode`	—	Optional small pre-headline label (Space Mono, uppercase, tracked).
`icon`	`ReactNode`	—	Optional leading icon.
`title`	`ReactNode`	—	Headline — Space Grotesk, body-sized.
`tone`	`"ghost" \| "critical" \| "accent" \| "warning" \| "signal" \| "raised" \| null \| undefined`	—

← All Components Getting Started →