Theme

Button

action @dryui/ui

Interactive button or link-styled action for submissions and calls to action

formactionclicksubmitctalink-button

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Button } from '@dryui/ui';
</script>

<Button variant="solid" onclick={handleClick}>Save</Button>
<Button href="/getting-started" variant="outline">Continue</Button>

Import options

Root package

ts
import { Button } from '@dryui/ui'

Per-component subpath

ts
import { Button } from '@dryui/ui/button'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Variants & Sizes

svelte
<Stack direction="horizontal" gap="sm" align="center">
  <Button variant="solid">Solid</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="soft">Soft</Button>
</Stack>
<Stack direction="horizontal" gap="sm" align="center">
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
  <Button disabled>Disabled</Button>
</Stack>

Variants

svelte
<Button variant="solid">Solid</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="soft">Soft</Button>

Sizes

svelte
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Link button

Continue
svelte
<Button href="/getting-started" variant="outline">Continue</Button>

Disabled

svelte
<Button disabled>Disabled</Button>
<Button variant="outline" disabled>Disabled Outline</Button>

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Prop Type Default Required Bindable
Appearance
variant
solidoutlineghostsoftsecondarylink
 'solid' — —
size
smmdlgiconicon-smicon-lg
 'md' — —
color
primarydanger
 'primary' — —
disabled
boolean
— — —
Link / Navigation
href
string When provided, Button renders an anchor instead of a button for link-style actions.
 — — —
rel
string
— — —
target
string
— — —
download
boolean | string
— — —
Content
children
Snippet
— ✓ —
type
buttonsubmitreset
 — — —

Forwards <button> attributes via rest props. Common examples: type, disabled, name.