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

Renders a consistent action trigger and confirmation dialog. On confirm, it submits a form action or remote form.

<script lang="ts">
  import { ConfirmationButton } from '@repo/components'
  import Trash2 from '@lucide/svelte/icons/trash-2'
</script>

<ConfirmationButton action="?/delete" label="Delete" icon={Trash2} title="Delete this record?" />

Props

Prop	Type	Description
`label`	`string`	Trigger text
`icon`	`Component`	Optional trigger icon
`title`	`string`	Dialog title (default: "Are you sure?")
`description`	`string`	Optional dialog description
`action`	`string`	Form action URL
`remoteForm`	`RemoteForm<Input, Output>`	Alternative: use a remote form
`onResult`	`(result) => void`	Callback after form submission
`formFields`	`Snippet`	Optional hidden or additional form fields
`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.

On this page