DryUI — Human-led, agent-assisted UI

Default Active Live Pending Annual

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 { Badge } from '@dryui/ui';
</script>

<Badge variant="soft">Active</Badge>

Import options

Root package

import { Badge } from '@dryui/ui'

Per-component subpath

import { Badge } from '@dryui/ui/badge'

API

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

Prop	Type	Description	Default	Required	Bindable
variant	solidoutlinesoftdot	Badge treatment ranging from filled emphasis to subtle outline styles.	—	—	—
color	grayblueredgreenyellowpurpleorangeinfosuccesswarningdanger	Semantic tone applied to the badge background, border, or text treatment.	—	—	—
size	smmd	Badge density preset for compact metadata or standard labels.	—	—	—
children	Snippet	Content rendered inside the component.	—	—	—
pulse	boolean	—	—	—	—
icon	Snippet	—	—	—	—