Buttons

Button primitive

The Button namespace re-exports the shadcn-svelte button with customizable variants powered by tailwind-variants.

<script lang="ts">
  import { Button } from '@repo/components'
</script>

<Button.Root variant="default">Save</Button.Root>
<Button.Root variant="cta" size="lg">Submit</Button.Root>
<Button.Root variant="ghost" size="icon">X</Button.Root>

When an href prop is provided, the button renders as an <a> tag instead of <button>.

Variants

Variant	Description
default	Primary action with brand colors
destructive	Bordered destructive style for delete/trash
destructive_ghost	Ghost-style destructive (hover only)
outline	Bordered with transparent background
secondary	Secondary action with border
ghost	Minimal, no background until hover
link	Transparent, underline on hover
success	Green border/text, solid green on hover
cta	Call-to-action, used as default form submit button

Sizes

Size	Description
default	Standard (min-h-9 px-4)
sm	Small (min-h-8 px-3)
lg	Large (min-h-10 px-8)
icon-xs	24px round icon
icon-sm	28px round icon
icon	32px round icon
icon-lg	36px round icon

Using buttonVariants directly

You can generate class strings without using the component:

import { Button } from '@repo/components'

const classes = Button.buttonVariants({ variant: 'destructive', size: 'sm' })

ConfirmationButton

Wraps any trigger content in a confirmation dialog. On confirm, submits a form action or remote form.

<script lang="ts">
  import { ConfirmationButton } from '@repo/components'
</script>

<ConfirmationButton action="?/delete" title="Delete this record?">
  Delete
</ConfirmationButton>

Props

Prop	Type	Description
title	string	Dialog title (default: "Are you sure?")
action	string	Form action URL
remoteForm	RemoteForm<any, any>	Alternative: use a remote form
onResult	(result) => void	Callback after form submission
children	Snippet	Trigger content
description	Snippet	Optional dialog description

Use either action or remoteForm, not both.

CopyButton

Copies text to clipboard with visual feedback (check icon for 5s, toast notification).

<script lang="ts">
  import { CopyButton } from '@repo/components'
</script>

<CopyButton text="some-id-to-copy" variant="ghost" size="icon-sm" />

Props

Extends all Button props, plus:

Prop	Type	Description
text	string	Text to copy

Customizing variants

Button variants can be overridden app-wide via StyleProvider. See the Custom Styling guide.