Diwa Design System

Button Pure

A minimal, transparent button — icon and label only, without background or border. Use it for inline actions, contextual links, and secondary affordances where a full button would be too heavy.

Properties

Name	Type	Default	Description
`icon`	`string`	`"arrow-right"`	Lucide icon name in kebab-case, or "none" to render no icon.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Text and icon size tier.
`alignLabel`	`"end" \| "start"`	`"end"`	Side the label appears on relative to the icon. "end" = icon left, label right.
`underline`	`boolean`	`false`	Adds underline decoration to the label text.
`active`	`boolean`	`false`	Forces the active/pressed visual state (background pill).
`stretch`	`boolean`	`false`	Fills the container width; icon and label pushed to opposite edges.
`hideLabel`	`boolean`	`false`	Hides the label visually (sr-only). Always provide descriptive slot text.
`disabled`	`boolean`	`false`	Disables the button. Blocks all pointer and keyboard interaction.
`loading`	`boolean`	`false`	Shows a spinner in place of the icon. Sets aria-busy. Disables interaction.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native button type. Ignored when href is set.
`href`	`string`	—	When set, renders as an <a> element with link semantics.
`target`	`"_blank" \| "_self" \| "_parent" \| "_top"`	—	Link target. Only meaningful when href is set.
`name`	`string`	—	Native button name for form submission.
`value`	`string`	—	Native button value for form submission.
`label`	`string`	—	Accessible label override. Required when hideLabel is true and slot text is absent.
`theme`	`"dark" \| "light"`	`"dark"`	Per-component theme override. Sets data-theme on the host element.

Events

Name	Detail type	Bubbles	Description
`click`	`MouseEvent`	Yes	Native DOM click event. Suppressed (preventDefault + stopPropagation) when disabled or loading.

Slots

Slot	Description
`default`	Button label text. Visually hidden when `hideLabel` is true but always present in the accessibility tree.

CSS Parts

Part	Description
`base`	The inner <button> or <a> element. Target with ::part(base) for custom styling.
`label`	The <span> wrapping the label slot.
`spinner`	The spinner element shown during loading.