Friendly UI0.4Storybook Documentation
Components

Chip

A compact label for status, categories, and metadata.

Preview
NeutralInformationCompleteNeeds attentionFailed

Usage

import { Chip } from '@fwenthehunter/friendly-ui';

<Chip>Neutral</Chip>
<Chip variant="info">Information</Chip>
<Chip variant="success">Complete</Chip>
<Chip variant="warning">Needs attention</Chip>
<Chip variant="error">Failed</Chip>

Chip renders a server-compatible span for short labels. The default neutral variant uses the theme background, foreground, and border. Info uses blue tints, success green, warning orange/yellow, and error red. Semantic colors adapt to the system light/dark theme.

Keep a meaningful text label so color is not the only indication of status. Chip is not interactive and does not announce changes automatically.

Each built-in variant has --fui-chip-VARIANT-background, --fui-chip-VARIANT-foreground, and --fui-chip-VARIANT-border tokens, where VARIANT is neutral, info, success, warning, or error. Override these in your theme file, or add your own string variant as shown below. No registration or client wrapper is needed. ChipVariant and ChipProps are exported for your own wrappers.

Customize this component

  1. Choose a name.
  2. Add its CSS to your app’s theme.css, imported after the package styles.
  3. Pass the same name to the prop. No registration, provider, or package edits are needed. Built-in TypeScript suggestions remain available.

A custom name alone does not create styles: until its CSS is loaded, it inherits the component’s base appearance. The examples below are application styles, not additional package defaults.

Change a built-in variant

Put these tokens in your app/theme.css after the package styles. They affect every success Chip and do not change Toast colors. These fixed colors apply in both light and dark themes. Add a matching @media (prefers-color-scheme: dark) rule if you want a different dark palette. The neutral tokens default to the theme background, foreground, and border.

/* app/theme.css — import after @fwenthehunter/friendly-ui/styles.css */
@layer components {
  :root {
    --fui-chip-success-background: #dcfce7;
    --fui-chip-success-foreground: #14532d;
    --fui-chip-success-border: #86efac;
  }
}
import { Chip } from "@fwenthehunter/friendly-ui";

<Chip variant="success">Complete</Chip>
Complete

Add a variant

Choose any string name, define its colors in app/theme.css after the package styles, and pass that name to variant. No registration is needed. Unknown variant names keep the neutral appearance until you add their CSS. Use --fui-chip-background, --fui-chip-foreground, and --fui-chip-border inside your selector, as in this example.

/* app/theme.css — import after @fwenthehunter/friendly-ui/styles.css */
@layer components {
  .fui-chip[data-variant="brand"] {
    --fui-chip-background: #ede9fe;
    --fui-chip-foreground: #5b21b6;
    --fui-chip-border: #c4b5fd;
  }
}
import { Chip } from "@fwenthehunter/friendly-ui";

<Chip variant="brand">Featured</Chip>
Featured

Props

Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.

PropTypeDefault
variantneutral | info | success | warning | error | custom stringneutral