Button

Use buttons for actions. Use a link-button only to navigate.

Variants

Show code

<DsmuButton>Save and continue</DsmuButton>
<DsmuButton variant="secondary">Cancel</DsmuButton>
<DsmuButton disabled>Disabled</DsmuButton>

Link styled as a button

Start now

Show code

<DsmuButton href="/start">Start now</DsmuButton>

Accessibility

Every button meets the 44px minimum target size and shares the system focus indicator. A link-button renders a real <a> so it behaves like a link for keyboard and screen-reader users.

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary'`	`'primary'`	Visual weight.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type (ignored when `href` is set).
`href`	`string`	—	Render as a link styled like a button.
`disabled`	`boolean`	`false`	Disable the button.