HazardTape

"use client";import { HazardTape } from "@/registry/okibi/ui/hazard-tape";export default function HazardTapeDemo() {  return (    <div className="flex w-full max-w-sm flex-col gap-3">      <HazardTape variant="signal">Restricted Subnet</HazardTape>      <HazardTape variant="warning">Caution // Black ICE</HazardTape>      <HazardTape variant="destructive">Breach Detected</HazardTape>    </div>  );}

Installation

Usage

import { HazardTape } from "@/components/ui/hazard-tape"

<HazardTape variant="warning">Restricted Sector</HazardTape>

Examples

Variants

Three striped accents — signal, warning, and destructive — for escalating severity banners.

"use client";import { HazardTape } from "@/registry/okibi/ui/hazard-tape";export default function VariantsDemo() {  return (    <div className="flex w-full max-w-md flex-col gap-3">      <HazardTape variant="signal">Restricted Channel</HazardTape>      <HazardTape variant="warning">Caution // Flux Surge</HazardTape>      <HazardTape variant="destructive">Uplink Breach Detected</HazardTape>    </div>  );}

API Reference

HazardTape

Accessibility

• Exposed as role='img' with an accessible name taken from an explicit aria-label, or derived from string or number children.
• With no resolvable name the img role is dropped so the visible uppercase label is read naturally instead of an image with no name.
• Pass an explicit aria-label whenever children are not a plain string — otherwise the banner has no accessible name.
• The two striped bands are purely decorative and marked aria-hidden; only the centered label carries meaning.
• Static and non-interactive by design — there is no focus, hover, or motion behavior to announce.

Guidelines

Do

• Keep labels short, uppercase warning straps like Restricted Sector or High Voltage.
• Match the variant to severity: signal for notices, warning for caution, destructive for danger.
• Provide an aria-label when the visible label is an icon or other non-string content.

Don't

• Do not pass long paragraphs or rich nodes expecting them to become the accessible name.
• Do not use it as an interactive control — it is a decorative banner, not a button or alert.
• Do not recolor the stripes by hand; the variants already pair each accent with the shared dark band.