Components
Chip
A pill-shaped filter or tag that toggles itself on press.
This component does not use the theme. Its colours are hardcoded Tailwind
greys and bg-white, not the semantic tokens, so it renders the same in dark
mode as in light and sits wrong on the dark canvas. Switch the theme toolbar
to see it. Everything else in the library reads background / foreground /
muted; this one predates that and has not been converted.
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { Chip } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
label | — | "Option A" | The chip text. Chip takes no children — the label is a prop. |
variant | filled · outlined | "filled" | filled reacts to selection; outlined draws a static border and never shows a selected state. |
selected | boolean | false | Seeds the chip's own state. An initial value, not a controlled prop — later changes from the parent are ignored. |
disabled | boolean | false | Blocks press and drops the chip to 40% opacity. |
icon | — | — | Node rendered before the label. Size it yourself; the chip applies no sizing of its own. |
onPress | — | — | Fired with the new selected state after the chip has toggled itself. |
Examples
Variants
<View className="flex-row flex-wrap items-start gap-3">
<Chip label="Filled" variant="filled" />
<Chip label="Filled selected" variant="filled" selected />
<Chip label="Outlined" variant="outlined" />
<Chip label="Disabled" disabled />
</View>With Icon
<Chip
label="Approved"
icon={<Icon name="checkmark" size={16} />}
/>