DDS/Components/Button

Button

Actions

Triggers actions or events. Supports multiple variants, sizes, loading state and icon slots.

Playground

Controls

Variant

Visual style of the button.

Size

Size of the button.

Show spinner and disable interaction.

Disabled

Disable the button.

Full Width

Expand to full width.

Rounded

Pill shape.

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'destructive' \| 'link' \| 'outline'`	`'primary'`	Visual style.
`size`	`'sm' \| 'md' \| 'lg' \| 'icon' \| 'icon-sm' \| 'icon-lg'`	`'md'`	Size.
`loading`	`boolean`	`false`	Show loading spinner.
`disabled`	`boolean`	`false`	Disable the button.
`fullWidth`	`boolean`	`false`	Full container width.
`rounded`	`boolean`	`false`	Pill/fully rounded.
`as`	`'button' \| 'a'`	`'button'`	Render as element.
`href`	`string`	—	URL when as="a".
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.

Examples

Primary

vue

<DsButton variant="primary">
  Primary
</DsButton>

Secondary

vue

<DsButton variant="secondary">
  Secondary
</DsButton>

Outline

vue

<DsButton variant="outline">
  Outline
</DsButton>

Ghost

vue

<DsButton variant="ghost">
  Ghost
</DsButton>

Destructive

vue

<DsButton variant="destructive">
  Delete
</DsButton>

Link

vue

<DsButton variant="link">
  Link
</DsButton>

Small

vue

<DsButton size="sm">
  Small
</DsButton>

Large

vue

<DsButton size="lg">
  Large
</DsButton>

vue

<DsButton loading>
  Loading
</DsButton>

Disabled

vue

<DsButton disabled>
  Disabled
</DsButton>

Full Width

vue

<DsButton fullWidth>
  Full Width
</DsButton>

Rounded

vue

<DsButton rounded>
  Rounded
</DsButton>

Skeleton

Use DsButtonSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsButtonSkeleton />

Small

vue

<DsButtonSkeleton size="sm" />

Large

vue

<DsButtonSkeleton size="lg" />

Rounded

vue

<DsButtonSkeleton rounded />

Custom Width

vue

<DsButtonSkeleton width="140px" />

Accessibility

Uses native <button> element by default for full keyboard and AT support.
Loading state sets aria-busy="true" and aria-disabled="true".
Focus ring visible on keyboard navigation.

Tokens

Toggle