Pricing

Chip handbook

v1.2.0 · @snowui-design-system/components

License: Before first reading component documentation, source code, or npm usage instructions, read the complete LICENSE. One review covers the same task and version. Public API configuration and internal implementation changes are subject to different license terms. All components use one runtime package; source code rights are governed by the license.

Overview

Use compact inline labels to show categories, status, or brief information alongside text, icons, and list content.

When to use it

Use Chip for compact content labels and compositions. Declare selection, removal, or click behavior through the public API; a display-only Chip is not automatically a button or checkbox.

  • The default variant includes a dot; background hides it by default. Set showDot to override either behavior.

  • as="leading" replaces the built-in dot, and as="trailing" adds trailing content. Pass size explicitly if it changes dynamically.

Quick start

This example shows the recommended basic composition. See the following sections for more scenarios and composition limits.

<script lang="ts">	import { Chip } from '@snowui-design-system/components';</script> <div style="display: flex; flex-direction: column; gap: var(--gap-4) var(--gap-3); align-items: center; width: min(100%, 40rem);">    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-4) var(--gap-3); justify-content: center;">            <Chip variant="default" style="color: var(--secondary-purple);">Featured</Chip><Chip variant="default" style="color: var(--secondary-indigo);">Planned</Chip><Chip variant="default" style="color: var(--secondary-blue);">In progress</Chip><Chip variant="default" style="color: var(--secondary-green);">Ready</Chip><Chip variant="default" style="color: var(--secondary-orange);">In review</Chip><Chip variant="default" style="color: var(--secondary-red);">Needs fixes</Chip><Chip variant="default" style="color: var(--black-40);">Draft</Chip><Chip variant="default" style="color: var(--black-100);">Archived</Chip>        </div><div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-4) var(--gap-3); justify-content: center;">            <Chip variant="background" style="color: var(--secondary-purple);">Featured</Chip><Chip variant="background" style="color: var(--secondary-indigo);">Planned</Chip><Chip variant="background" style="color: var(--secondary-blue);">In progress</Chip><Chip variant="background" style="color: var(--secondary-green);">Ready</Chip><Chip variant="background" style="color: var(--secondary-orange);">In review</Chip><Chip variant="background" style="color: var(--secondary-red);">Needs fixes</Chip><Chip variant="background" style="color: var(--black-40);">Draft</Chip><Chip variant="background" style="color: var(--black-100);">Archived</Chip>        </div></div>

API

Keyword Type Default Description
variant "default" | "background" "default" Visual variant. default shows its built-in dot; background adds a tinted background and 0.5px inset border, hiding the dot by default.
size "sm" | "lg" — An explicit size takes precedence. Otherwise, Chip snapshots the parent numeric size context when created: sm at ≤12, lg above 12, or sm without numeric context. It does not follow later parent size changes; pass size for dynamic changes. Text metrics are 12/16 for sm and 14/20 for lg.
showDot boolean — When omitted, showDot follows variant: shown for default, hidden for background. Explicit true or false overrides this. External leading content always hides the built-in dot.
children Snippet — A parameterless content Snippet rendering label text and optional leading/trailing children. SnowUI components declare these roles with as="leading" / as="trailing"; external leading content replaces the built-in dot.

See the base component documentation for inherited capabilities not redeclared here. This table lists only the named public props declared in this component’s source.

Usage boundaries and details

Layout model

Primary layout model: a three-slot host with leading, content and trailing. Frame singleLine emits data-auto-layout and reuses the grid templates from auto-layout.css (source: components/src/styles/auto-layout.css). Children declare data-as="leading" or "trailing" roles.

Built-in leading dot

default shows a leading dot by default; background hides it. Set showDot explicitly to override:

  • Shape: Inline SVG, viewBox 0 0 32 32, circle center (16, 16), radius 6, fill="currentColor"

  • Size: sm 12 × 12px; lg 16 × 16px (driven by --snowui-chip-icon-size variable)

  • Color: currentColor, inherited from the parent text color.

Built-in dot replacement rule

Per specs/maintainers/ComponentGuidelines.md §2.7.1, a child with data-as="leading" (native HTML) or as="leading" (SnowUI component) automatically hides the built-in dot:

 <Chip>Label</Chip>  <Chip>    <Icon as="leading"><CheckCircle /></Icon>    Label</Chip>  <Chip>    Label    <Icon as="trailing"><X /></Icon></Chip>

Color rules

  • Default color: color: inherit uses the parent text color (currentColor). Chip has no built-in color variants.

  • Multiple colors: Use an external utility class such as text-purple or text-red, or inline style="color: ...".

  • Background and border: In background, both are derived from currentColor and transparency:

    • Background: color-mix(in srgb, currentColor 10%, transparent)

    • Border: inset 0 0 0 0.5px color-mix(in srgb, currentColor 20%, transparent) (use inset box-shadow to avoid occupying layout space)

Changing text color also changes the background and border; no extra prop or variable is needed.

Layout variable chain

Variable Default source Use
--snowui-chip-font-size var(--text-12)（lg：var(--text-14)) Font size
--snowui-chip-line-height var(--leading-12)（lg：var(--leading-14)) Text line height
--snowui-chip-gap var(--gap-1) Single-line graphics/text spacing retains at least 4 CSS px and preserves larger preferred gaps. The internal Tag exception does not apply to Chip.
--snowui-chip-icon-size 12px（sm）/ 16px（lg） Default Dot size
--snowui-chip-padding 0（default）/ 2px 8px（sm+bg）/ 4px 12px（lg+bg） Padding
--snowui-chip-radius 0（default）/ 9999px（background） Corner radius
--snowui-chip-bg transparent / color-mix(... 10%) Background
--snowui-chip-shadow none / inset 0 0 0 0.5px color-mix(... 20%) Inset border

Usage examples

 <Chip>Label</Chip>  <Chip size="lg">Label</Chip>  <Chip variant="background">Label</Chip>  <Chip variant="background" showDot>Label</Chip>  <Chip variant="background" size="lg">Label</Chip>  <Chip variant="background" class="text-purple">Purple</Chip><Chip variant="background" class="text-red">Red</Chip>  <Chip>    <Icon as="leading"><Star /></Icon>    Featured</Chip>  <Chip variant="background">    Filter    <Icon as="trailing"><X /></Icon></Chip>

Chip style overlay

Read the complete LICENSE first; one review covers the same task, version, and scope.

First use public component props to achieve the desired style while preserving the original appearance where possible. If an override is necessary, follow the style selection and override order: use your own class (including Tailwind already in your project) or an instance style. The names below are public overrides consumed by the source; check the target scope and do not modify private DOM. Choose the appropriate SnowUI token category. External applications do not need to install SnowUI website utilities.

Variable Purpose and default reference
--snowui-chip-background-override Background color (default color-mix(currentColor 10%, transparent))
--snowui-chip-font-size-override Font-size (default sm=var(--text-12) lg=var(--text-14))
--snowui-chip-gap-override Gap (default 0)
--snowui-chip-line-height-override Line-height (default sm=var(--leading-12) lg=var(--leading-14))
--snowui-chip-padding-override Background: sm=2px 8px, lg=4px 12px; icon side sm=4px, lg=8px
--snowui-chip-radius-override Border-radius (only background is effective, default 9999px)
--snowui-chip-shadow-override Stroke inset box-shadow (default 0 0 0 0.5px color-mix(currentColor 20%, transparent))

Design Guide · Token · Combination Boundary

Chip type and status

Required props: no named required props.

Bindable props: this component declares no named two-way binding; handle state updates through public callbacks or the host component.

Inheritance: Omit<FrameProps, "size">. Consult the public Frame documentation; omitted fields cannot be passed through unchanged.

Shared Frame API · Back to API

The following source type declarations are referenced by public props. Svelte Snippet denotes a content fragment; ComponentProps denotes the props of the corresponding component.