SEED Design
Tabs

Chip Tabs

Chip 형태로 표현된 탭 컴포넌트입니다. 카테고리나 필터를 선택하여 콘텐츠를 전환할 때 사용됩니다.

import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

export default function ChipTabsPreview() {
  const [value, setValue] = React.useState("1");
  return (
    <>
      <ChipTabsRoot
        variant="neutralSolid"
        defaultValue="1"
        value={value}
        onValueChange={(value) => setValue(value)}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <div>content 1</div>}
      {value === "2" && <div>content 2</div>}
      {value === "3" && <div>content 3</div>}
    </>
  );
}

Installation

npx @seed-design/cli@latest add ui:chip-tabs

Props

ChipTabsRoot

Prop

Type

ChipTabsList

Prop

Type

ChipTabsTrigger

Prop

Type

ChipTabsCarousel

Prop

Type

ChipTabsContent

Prop

Type

Examples

Size=Medium

import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

export default function ChipTabsSizeMedium() {
  const [value, setValue] = React.useState("1");
  return (
    <>
      <ChipTabsRoot
        variant="neutralSolid"
        size="medium"
        defaultValue="1"
        value={value}
        onValueChange={(value) => setValue(value)}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <div>content 1</div>}
      {value === "2" && <div>content 2</div>}
      {value === "3" && <div>content 3</div>}
    </>
  );
}

Size=Large

import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

export default function ChipTabsSizeLarge() {
  const [value, setValue] = React.useState("1");
  return (
    <>
      <ChipTabsRoot
        variant="neutralSolid"
        size="large"
        defaultValue="1"
        value={value}
        onValueChange={(value) => setValue(value)}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <div>content 1</div>}
      {value === "2" && <div>content 2</div>}
      {value === "3" && <div>content 3</div>}
    </>
  );
}

Variant=Neutral Solid

import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

export default function ChipTabsVariantNeutralSolid() {
  const [value, setValue] = React.useState("1");
  return (
    <>
      <ChipTabsRoot
        variant="neutralSolid"
        defaultValue="1"
        value={value}
        onValueChange={(value) => setValue(value)}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <div>content 1</div>}
      {value === "2" && <div>content 2</div>}
      {value === "3" && <div>content 3</div>}
    </>
  );
}

Variant=Neutral Outline

import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

export default function ChipTabsVariantNeutralOutline() {
  const [value, setValue] = React.useState("1");
  return (
    <>
      <ChipTabsRoot
        variant="neutralOutline"
        defaultValue="1"
        value={value}
        onValueChange={(value) => setValue(value)}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <div>content 1</div>}
      {value === "2" && <div>content 2</div>}
      {value === "3" && <div>content 3</div>}
    </>
  );
}

Variant=Brand Solid (Deprecated)

brandSolid는 deprecated 됐습니다. neutralSolid, neutralOutline을 사용해주세요.

import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

export default function ChipTabsVariantBrandSolid() {
  const [value, setValue] = React.useState("1");
  return (
    <>
      <ChipTabsRoot
        variant="brandSolid"
        defaultValue="1"
        value={value}
        onValueChange={(value) => setValue(value)}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <div>content 1</div>}
      {value === "2" && <div>content 2</div>}
      {value === "3" && <div>content 3</div>}
    </>
  );
}

Notification

import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

export default function ChipTabsNotification() {
  const [value, setValue] = React.useState("1");
  return (
    <>
      <ChipTabsRoot
        variant="neutralOutline"
        size="medium"
        defaultValue="1"
        value={value}
        onValueChange={(value) => setValue(value)}
      >
        <ChipTabsList>
          <ChipTabsTrigger notification value="1">
            라벨1
          </ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <div>content 1</div>}
      {value === "2" && <div>content 2</div>}
      {value === "3" && <div>content 3</div>}
    </>
  );
}

With Scroll Fog

탭이 많아 가로 스크롤이 필요한 경우 Scroll Fog를 적용하여 좌우 스크롤 힌트를 제공할 수 있습니다.

권장 padding인 20px을 유지해야 합니다.

import { ScrollFog } from "@seed-design/react";
import {
  ChipTabsCarousel,
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";

export default function ChipTabsWithScrollFog() {
  return (
    <div style={{ maxWidth: "360px" }}>
      <ChipTabsRoot variant="neutralSolid" defaultValue="1">
        <ChipTabsCarousel>
          <ScrollFog placement={["left", "right"]}>
            <ChipTabsList style={{ paddingLeft: "20px", paddingRight: "20px" }}>
              {Array.from({ length: 15 }, (_, i) => (
                <ChipTabsTrigger key={i + 1} value={String(i + 1)}>
                  라벨{i + 1}
                </ChipTabsTrigger>
              ))}
            </ChipTabsList>
          </ScrollFog>
        </ChipTabsCarousel>
      </ChipTabsRoot>
    </div>
  );
}

Stackflow

import * as React from "react";

import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";
import type { ActivityComponentType } from "@stackflow/react/future";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
import { AppBar, AppBarMain } from "seed-design/ui/app-bar";

declare module "@stackflow/config" {
  interface Register {
    "react/chip-tabs/basic-activity": {};
  }
}

const ChipTabsBasicActivity: ActivityComponentType<"react/chip-tabs/basic-activity"> = () => {
  const [value, setValue] = React.useState("1");

  const commonStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#eeeeee",
    height: "100%",
  };

  return (
    <AppScreen>
      <AppBar>
        <AppBarMain>Chip Tabs</AppBarMain>
      </AppBar>
      <AppScreenContent>
        <ChipTabsRoot
          variant="neutralSolid"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div style={commonStyle}>content 1</div>}
        {value === "2" && <div style={commonStyle}>content 2</div>}
        {value === "3" && <div style={commonStyle}>content 3</div>}
      </AppScreenContent>
    </AppScreen>
  );
};

export default ChipTabsBasicActivity;

Last updated on

On this page

Installation
Props
ChipTabsRoot
ChipTabsList
ChipTabsTrigger
ChipTabsCarousel
ChipTabsContent
Examples
Size=Medium
Size=Large
Variant=Neutral Solid
Variant=Neutral Outline
Variant=Brand Solid (Deprecated)
Notification
With Scroll Fog
Stackflow