Forms

Button

A native button styled with intent, variant, and size modifiers.

stableNo JS requiredBuilt on <button>hydrateless/button.css

A native <button> styled with intent, variant, and size modifiers. It keeps focus, form submission, and keyboard semantics for free, so there is nothing to enhance and no JavaScript to ship.

Playground

Every modifier maps to a data-hl-* attribute (or a prop in the framework bindings).

Live

LabelIntentneutralprimarydangersuccesswarninginfoVariantsolidsoftoutlineghostlinkSizesmmdlgFull widthLoadingDisabled

Variants

The five variants pair with any intent.

Live

Icon and loading

Use data-hl-icon for square icon-only buttons and data-hl-loading to show a spinner.

Live

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
intent	'neutral' | 'primary' | 'danger' | 'success' | 'warning' | 'info'	'neutral'	Semantic color role.
variant	'solid' | 'soft' | 'outline' | 'ghost' | 'link'	'solid'	Visual emphasis.
size	'sm' | 'md' | 'lg'	'md'	Control height and padding.
block	boolean	false	Stretch to the full width of the container.
icon	boolean	false	Render a square, icon-only button.
loading	boolean	false	Show a spinner and disable interaction.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-primary	Solid background for the primary intent.
--hl-primary-hover	Hover background for the primary intent.
--hl-radius-md	Corner radius.
--hl-control-height-md	Default height.
--hl-focus-ring	Focus outline.

Accessibility

• Renders a real <button>, so Enter/Space activation, focus order, and form submission are native.
• Icon-only buttons need an aria-label; the docs example sets one.
• The loading state sets disabled, which both blocks clicks and removes the control from the tab order.
• Focus is always visible through the shared --hl-focus-ring token.

Related

BadgeA small label for statuses, counts, and tags.Segmented ControlA compact single-select built on native radios.Dropdown MenuA button-triggered menu following the WAI-ARIA menu pattern.