이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Button

Previous Next

버튼 또는 버튼처럼 보이는 컴포넌트를 표시합니다.

API Reference 
<script lang="ts">
  import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<div class="flex flex-wrap items-center gap-2 md:flex-row">
  <Button variant="outline">버튼</Button>
  <Button variant="outline" size="icon" aria-label="제출">
    <ArrowUpIcon />
  </Button>
</div>
<Button variant="outline">버튼</Button>
<Button variant="outline" size="icon" aria-label="제출">
  <ArrowUpIcon />
</Button>

설치

pnpm dlx shadcn-svelte@latest add button

사용법

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button variant="outline">버튼</Button>

예제

Size

<script lang="ts">
  import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<div class="flex flex-col items-start gap-8 sm:flex-row">
  <div class="flex items-start gap-2">
    <Button size="sm" variant="outline">작게</Button>
    <Button size="icon-sm" aria-label="제출" variant="outline">
      <ArrowUpRightIcon />
    </Button>
  </div>
  <div class="flex items-start gap-2">
    <Button variant="outline">기본</Button>
    <Button size="icon" aria-label="제출" variant="outline">
      <ArrowUpRightIcon />
    </Button>
  </div>
  <div class="flex items-start gap-2">
    <Button variant="outline" size="lg">크게</Button>
    <Button size="icon-lg" aria-label="제출" variant="outline">
      <ArrowUpRightIcon />
    </Button>
  </div>
</div>
<!-- Small -->
<Button size="sm" variant="outline">작게</Button>
<Button size="icon-sm" aria-label="제출" variant="outline">
  <ArrowUpRightIcon />
</Button>
 
<!-- Medium -->
<Button variant="outline">기본</Button>
<Button size="icon" aria-label="제출" variant="outline">
  <ArrowUpRightIcon />
</Button>
 
<!-- Large -->
<Button size="lg" variant="outline">크게</Button>
<Button size="icon-lg" aria-label="제출" variant="outline">
  <ArrowUpRightIcon />
</Button>

Default

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button>버튼</Button>
<Button>버튼</Button>

Outline

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button variant="outline">외곽선</Button>
<Button variant="outline">아웃라인</Button>

Secondary

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button variant="secondary">보조</Button>
<Button variant="secondary">보조</Button>

Ghost

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button variant="ghost">고스트</Button>
<Button variant="ghost">고스트</Button>

Destructive

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button variant="destructive">위험</Button>
<Button variant="destructive">파괴적</Button>

Link

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button variant="link">링크</Button>
<Button variant="link">링크</Button>

Icon

<script lang="ts">
  import CircleFadingArrowUpIcon from "@lucide/svelte/icons/circle-fading-arrow-up";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button variant="outline" size="icon" aria-label="제출">
  <CircleFadingArrowUpIcon />
</Button>
<Button variant="outline" size="icon" aria-label="제출">
  <CircleFadingArrowUpIcon />
</Button>

아이콘과 함께

아이콘과 텍스트 사이의 간격은 버튼 크기에 따라 자동으로 조정됩니다. 아이콘에 별도의 여백을 설정할 필요가 없습니다.

<script lang="ts">
  import IconGitBranch from "@lucide/svelte/icons/git-branch";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button variant="outline" size="sm">
  <IconGitBranch /> 새 브랜치
</Button>
<Button variant="outline" size="sm">
  <IconGitBranch /> 새 브랜치
</Button>

둥근 버튼

rounded-full 클래스를 사용하여 버튼을 둥글게 만들 수 있습니다.

<script lang="ts">
  import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<div class="flex flex-col gap-8">
  <Button variant="outline" size="icon" class="rounded-full">
    <ArrowUpIcon />
  </Button>
</div>
<Button variant="outline" size="icon" className="rounded-full">
  <ArrowUpRightIcon />
</Button>

Spinner

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
 
<Button size="sm" variant="outline" disabled>
  <Spinner />
  제출
</Button>
<Button size="sm" variant="outline" disabled>
  <Spinner />
  제출
</Button>

버튼 그룹

버튼 그룹을 만들려면 ButtonGroup 컴포넌트를 사용하세요. 자세한 내용은 버튼 그룹 문서를 참고하세요.

<script lang="ts">
  import Archive from "@lucide/svelte/icons/archive";
  import ArrowLeft from "@lucide/svelte/icons/arrow-left";
  import CalendarPlus from "@lucide/svelte/icons/calendar-plus";
  import Clock from "@lucide/svelte/icons/clock";
  import ListFilter from "@lucide/svelte/icons/list-filter";
  import MailCheck from "@lucide/svelte/icons/mail-check";
  import MoreHorizontal from "@lucide/svelte/icons/more-horizontal";
  import Tag from "@lucide/svelte/icons/tag";
  import Trash2 from "@lucide/svelte/icons/trash-2";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as ButtonGroup from "$lib/components/ui/button-group/index.js";
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
 
  let label = $state("personal");
</script>
 
<ButtonGroup.Root>
  <ButtonGroup.Root class="hidden sm:flex">
    <Button variant="outline" size="icon-sm" aria-label="뒤로 가기">
      <ArrowLeft />
    </Button>
  </ButtonGroup.Root>
  <ButtonGroup.Root>
    <Button size="sm" variant="outline">보관</Button>
    <Button size="sm" variant="outline">신고</Button>
  </ButtonGroup.Root>
  <ButtonGroup.Root>
    <Button size="sm" variant="outline">일시중지</Button>
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        {#snippet child({ props })}
          <Button
            {...props}
            variant="outline"
            size="icon-sm"
            aria-label="더 많은 옵션"
          >
            <MoreHorizontal />
          </Button>
        {/snippet}
      </DropdownMenu.Trigger>
      <DropdownMenu.Content align="end" class="w-52">
        <DropdownMenu.Group>
          <DropdownMenu.Item>
            <MailCheck />
            읽음으로 표시
          </DropdownMenu.Item>
          <DropdownMenu.Item>
            <Archive />
            보관
          </DropdownMenu.Item>
        </DropdownMenu.Group>
        <DropdownMenu.Separator />
        <DropdownMenu.Group>
          <DropdownMenu.Item>
            <Clock />
            일시중지
          </DropdownMenu.Item>
          <DropdownMenu.Item>
            <CalendarPlus />
            캘린더에 추가
          </DropdownMenu.Item>
          <DropdownMenu.Item>
            <ListFilter />
            목록에 추가
          </DropdownMenu.Item>
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger>
              <Tag />
              라벨 지정...
            </DropdownMenu.SubTrigger>
            <DropdownMenu.SubContent>
              <DropdownMenu.RadioGroup bind:value={label}>
                <DropdownMenu.RadioItem value="personal">
                  개인
                </DropdownMenu.RadioItem>
                <DropdownMenu.RadioItem value="work"
                  >업무</DropdownMenu.RadioItem
                >
                <DropdownMenu.RadioItem value="other"
                  >기타</DropdownMenu.RadioItem
                >
              </DropdownMenu.RadioGroup>
            </DropdownMenu.SubContent>
          </DropdownMenu.Sub>
        </DropdownMenu.Group>
        <DropdownMenu.Separator />
        <DropdownMenu.Group>
          <DropdownMenu.Item class="text-destructive focus:text-destructive">
            <Trash2 />
            휴지통
          </DropdownMenu.Item>
        </DropdownMenu.Group>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  </ButtonGroup.Root>
</ButtonGroup.Root>
<ButtonGroup.Root>
  <ButtonGroup.Root class="hidden sm:flex">
    <Button variant="outline" size="icon" aria-label="뒤로 가기">
      <ArrowLeft />
    </Button>
  </ButtonGroup.Root>
  <ButtonGroup.Root>
    <Button variant="outline">보관</Button>
    <Button variant="outline">신고</Button>
  </ButtonGroup.Root>
  <ButtonGroup.Root>
    <Button variant="outline">일시 중지</Button>
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        {#snippet child({ props })}
          <Button
            {...props}
            variant="outline"
            size="icon"
            aria-label="더 많은 옵션"
          >
            <MoreHorizontal />
          </Button>
        {/snippet}
      </DropdownMenu.Trigger>
      <DropdownMenu.Content align="end" class="w-52">
        <DropdownMenu.Group>
          <DropdownMenu.Item>
            <MailCheck />
            읽음으로 표시
          </DropdownMenu.Item>
          <DropdownMenu.Item>
            <Archive />
            보관
          </DropdownMenu.Item>
        </DropdownMenu.Group>
        <DropdownMenu.Separator />
        <DropdownMenu.Group>
          <DropdownMenu.Item>
            <Clock />
            일시 중지
          </DropdownMenu.Item>
          <DropdownMenu.Item>
            <CalendarPlus />
            캘린더에 추가
          </DropdownMenu.Item>
          <DropdownMenu.Item>
            <ListFilter />
            목록에 추가
          </DropdownMenu.Item>
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger>
              <Tag />
              라벨 지정...
            </DropdownMenu.SubTrigger>
            <DropdownMenu.SubContent>
              <DropdownMenu.RadioGroup bind:value={label}>
                <DropdownMenu.RadioItem value="personal">
                  개인
                </DropdownMenu.RadioItem>
                <DropdownMenu.RadioItem value="work"
                  >업무</DropdownMenu.RadioItem
                >
                <DropdownMenu.RadioItem value="other"
                  >기타</DropdownMenu.RadioItem
                >
              </DropdownMenu.RadioGroup>
            </DropdownMenu.SubContent>
          </DropdownMenu.Sub>
        </DropdownMenu.Group>
        <DropdownMenu.Separator />
        <DropdownMenu.Group>
          <DropdownMenu.Item class="text-destructive focus:text-destructive">
            <Trash2 />
            휴지통
          </DropdownMenu.Item>
        </DropdownMenu.Group>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  </ButtonGroup.Root>
</ButtonGroup.Root>

링크

href를 prop으로 전달하여 <button>을 <a> 요소로 변환할 수 있습니다.

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button href="/dashboard">대시보드</Button>

또는 buttonVariants 헬퍼를 사용하여 버튼처럼 보이는 링크를 만들 수 있습니다.

<script lang="ts">
  import { buttonVariants } from "$lib/components/ui/button";
</script>
 
<a href="/dashboard" class={buttonVariants({ variant: "outline" })}>
  대시보드
</a>

변경 이력

2025-09-24 새로운 크기

버튼 컴포넌트에 icon-sm과 icon-lg 두 가지 새로운 크기를 추가했습니다. 이 크기들은 아이콘 버튼을 만들 때 사용됩니다. 추가하려면 button.svelte를 편집하고 buttonVariants의 size 아래에 다음 코드를 추가하세요:

components/ui/button.svelte
export const buttonVariants = tv({
  // ...
  variants: {
    // ...
    size: {
      // ...
      icon: "size-9",
      "icon-sm": "size-8",
      "icon-lg": "size-10",
    },
  },
});