Components

Component

Chip

Compact button, toggle, and radio chips for filtering or lightweight commands.

ReactReact Native7 props
PreviewReact

Imports

import { Chip, ChipButton, ChipToggle, ChipRadioRoot, ChipRadioItem } from "@hozorica/hods-react/chip";
import { Chip, ChipButton, ChipToggle, ChipRadioRoot, ChipRadioItem } from "@hozorica/hods-react-native/chip";

Props

PropTypeDescription
sizesmall | medium | largeChip height and text density.
variantsolid | outlineStrong | outlineWeakChip emphasis and border treatment.
layoutwithText | iconOnlyText or icon-only layout.
checked / defaultCheckedbooleanChip.Toggle state.
value / defaultValuestringChip.RadioRoot selected value.
onCheckedChange / onValueChangefunctionSelection callbacks.
disabledbooleanDisables one chip.

Platform Support

React

Button, checkbox-backed toggle, and radio-backed item primitives with label/icon/avatar slots.

React Native

Pressable button, toggle, and radio chips with matching value APIs.

Usage

<Chip.RadioRoot defaultValue="near"><Chip.RadioItem value="near">가까운순</Chip.RadioItem></Chip.RadioRoot>

Notes

  • Use Chip.Button for commands, Chip.Toggle for independent filters, and Chip.RadioRoot/Item for one-of-many filters.
  • Use slot helpers for prefix icons, suffix icons, avatars, and truncating labels.