React
Toggle Button
사용자가 특정 상태를 켜거나 끌 수 있게 해주는 버튼 형태의 컴포넌트입니다. 필터링이나 뷰 전환과 같은 즉각적인 상태 변경에 사용됩니다.
import { useState } from "react";
import { ToggleButton } from "seed-design/ui/toggle-button";
export default function ToggleButtonPreview() {
const [pressed, setPressed] = useState(false);
return (
<ToggleButton pressed={pressed} onPressedChange={setPressed}>
{pressed ? "선택됨" : "미선택"}
</ToggleButton>
);
}Installation
npx @seed-design/cli@latest add ui:toggle-buttonpnpm dlx @seed-design/cli@latest add ui:toggle-buttonyarn dlx @seed-design/cli@latest add ui:toggle-buttonbun x @seed-design/cli@latest add ui:toggle-button의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:toggle-button
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import {
ToggleButton as SeedToggleButton,
type ToggleButtonProps as SeedToggleButtonProps,
} from "@seed-design/react";
import * as React from "react";
import { LoadingIndicator } from "./loading-indicator";
export interface ToggleButtonProps extends SeedToggleButtonProps {}
/**
* @see https://seed-design.io/react/components/toggle-button
* If `asChild` is enabled, manual handling of `LoadingIndicator` is required.
*/
export const ToggleButton = React.forwardRef<
React.ElementRef<typeof SeedToggleButton>,
ToggleButtonProps
>(({ loading = false, children, ...otherProps }, ref) => {
return (
<SeedToggleButton ref={ref} loading={loading} {...otherProps}>
{loading && !otherProps.asChild ? <LoadingIndicator>{children}</LoadingIndicator> : children}
</SeedToggleButton>
);
});
ToggleButton.displayName = "ToggleButton";
/**
* This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
* You can extend this snippet however you want.
*/
Props
Prop
Type
pressed?boolean | undefineddefaultPressed?boolean | undefinedonPressedChange?((pressed: boolean) => void) | undefinedExamples
Brand Solid
import { useState } from "react";
import { ToggleButton } from "seed-design/ui/toggle-button";
export default function ToggleButtonBrandSolid() {
const [pressed, setPressed] = useState(false);
return (
<ToggleButton variant="brandSolid" pressed={pressed} onPressedChange={setPressed}>
{pressed ? "선택됨" : "미선택"}
</ToggleButton>
);
}Neutral Weak
import { useState } from "react";
import { ToggleButton } from "seed-design/ui/toggle-button";
export default function ToggleButtonBrandSolid() {
const [pressed, setPressed] = useState(false);
return (
<ToggleButton variant="neutralWeak" pressed={pressed} onPressedChange={setPressed}>
{pressed ? "선택됨" : "미선택"}
</ToggleButton>
);
}Small
import { useState } from "react";
import { ToggleButton } from "seed-design/ui/toggle-button";
export default function ToggleButtonSmall() {
const [pressed, setPressed] = useState(false);
return (
<ToggleButton size="small" pressed={pressed} onPressedChange={setPressed}>
{pressed ? "선택됨" : "미선택"}
</ToggleButton>
);
}Xsmall
import { useState } from "react";
import { ToggleButton } from "seed-design/ui/toggle-button";
export default function ToggleButtonXsmall() {
const [pressed, setPressed] = useState(false);
return (
<ToggleButton size="xsmall" pressed={pressed} onPressedChange={setPressed}>
{pressed ? "선택됨" : "미선택"}
</ToggleButton>
);
}Prefix Icon
import { IconCheckmarkLine, IconPlusLine } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { useState } from "react";
import { ToggleButton } from "seed-design/ui/toggle-button";
export default function ToggleButtonPrefixIcon() {
const [pressed, setPressed] = useState(false);
return (
<ToggleButton pressed={pressed} onPressedChange={setPressed}>
<PrefixIcon svg={pressed ? <IconPlusLine /> : <IconCheckmarkLine />} />
{pressed ? "선택됨" : "미선택"}
</ToggleButton>
);
}Disabled
import { ToggleButton } from "seed-design/ui/toggle-button";
export default function ToggleButtonDisabled() {
return <ToggleButton disabled>비활성</ToggleButton>;
}Loading
import { useState } from "react";
import { ToggleButton } from "seed-design/ui/toggle-button";
export default function ToggleButtonLoading() {
const [pressed, setPressed] = useState(false);
const [loading, setLoading] = useState(false);
function handleToggle() {
setLoading(true);
setTimeout(() => {
setLoading(false);
setPressed((prev) => !prev);
}, 2000);
}
// 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
return (
<ToggleButton loading={loading} pressed={pressed} onPressedChange={handleToggle}>
시간이 걸리는 토글
</ToggleButton>
);
}Last updated on