Components

Component

ChipTabs

Chip-shaped tabs for compact category switching.

ReactReact Native8 props
PreviewReact

전체

Imports

import { ChipTabsRoot, ChipTabsList, ChipTabsTrigger, ChipTabsContent } from "@hozorica/hods-react/chip-tabs";
import { ChipTabsRoot, ChipTabsList, ChipTabsTrigger, ChipTabsContent } from "@hozorica/hods-react-native/chip-tabs";

Props

PropTypeDescription
variantbrandSolid | neutralSolid | neutralOutlineSelected and unselected chip treatment.
sizemedium | largeChip height and text density.
contentLayoutfill | hugControls whether content fills the root area.
orientationhorizontal | verticalTab list direction.
value / defaultValuestringControlled and uncontrolled active tab value.
onValueChange(value) => voidCalled when a chip changes the selected value.
lazyMount / unmountOnExitbooleanControls inactive content mounting.
disabledbooleanDisables a ChipTabsTrigger.

Platform Support

React

Accessible tab primitives styled as compact chips, with keyboard navigation and mount policy.

React Native

Pressable chip tabs with horizontal scrolling list behavior.

Usage

<ChipTabsRoot defaultValue="all"><ChipTabsList><ChipTabsTrigger value="all">전체</ChipTabsTrigger></ChipTabsList><ChipTabsContent value="all">전체</ChipTabsContent></ChipTabsRoot>

Notes

  • Use ChipTabs for category-like switches where the tab affordance should be lighter than full-width tabs.
  • Use Tabs for primary in-page section switching.