DryUI — Human-led, agent-assisted UI

Accessibility

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

import { Button } from '@dryui/ui'

Per-component subpath

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

API

Props, CSS variables, and the public data attributes you can target when styling.

Appearance

Prop	Type	Description	Default	Required	Bindable
variant	solidoutlineghostsoftsecondarylinkbaretriggernavtabtogglepill	Button treatment. solid, outline, ghost, soft, secondary, link, and bare set surface and density for normal text buttons. trigger pairs with disclosure menus. tab and toggle expose aria-selected and aria-pressed states. pill is a rounded outline-on-hover chip. nav is an icon-only circular rail button (aspect-ratio 1, fully rounded) and must be paired with size='icon'; for full-width sidebar nav rows use ghost or pill, not nav.	'solid'	—	—
size	smmdlgiconicon-smicon-lg	Button density preset, including icon-only sizing variants.	'md'	—	—
color	primarydangerinknull	Semantic tone. 'primary' and 'danger' are brand/error. 'ink' renders a solid near-black editorial CTA that auto-inverts in dark theme via --dry-color-bg-inverse/--dry-color-text-inverse. Any other string is passed through as a data-color hook for custom presets.	'primary'	—	—
disabled	boolean	Prevents interaction and applies disabled styling.	false	—	—

Link / Navigation

Prop	Type	Description	Default	Required	Bindable
href	string When provided, Button renders an anchor instead of a button for link-style actions.	Destination URL when the component renders as a link.	—	—	—
rel	string	Relationship between the current document and the linked resource.	—	—	—
target	string	Browsing context used for link navigation.	—	—	—
download	boolean \| string	Requests download behavior when the component renders as a link.	—	—	—

Content

Prop	Type	Description	Default	Required	Bindable
children	Snippet	Content rendered inside the component.	—	✓	—
type	buttonsubmitreset	HTML type attribute or component-specific type selector.	'button'	—	—