Actions and display

Button

Button - Versatile button component Supports both button and link rendering. When href is provided, renders as an anchor tag. Otherwise renders as a button.

Public export

typescript

import { Button } from '@happyvertical/smrt-ui/ui';

Import path: @happyvertical/smrt-ui/ui
Props: 10
Props described: 10 of 10
Bindable state: 0
Callback events: 0
Verified release: 0.44.0

Props

Also accepts Omit<HTMLButtonAttributes, 'class' | 'href'>. The table lists the component-specific contract.

NameTypeRequiredDescription

variantButtonVariantNoVisual variant

sizeButtonSizeNoSize variant

hrefstringNoURL for link mode (renders as <a> tag)

childrenSnippetNoSnippet for button content

fullWidthbooleanNoFull width button

loadingbooleanNoLoading state

classstringNoExtra class(es) appended after the base `button {variant} {size}` styling. Lets callers adopt Button for custom-styled buttons without losing their own CSS (issue #1589) — the base button styling still applies.

targetHTMLAnchorAttributes['target']NoAnchor-mode attributes (link mode only, i.e. when `href` is set). The component already spreads these onto the rendered `<a>`; they are declared here so callers migrating an external `<a target="_blank" rel="...">` to Button (issue #1589) keep them type-checked. Ignored in button mode.

relHTMLAnchorAttributes['rel']NoSpecifies the relationship between the button link and the target URL.

downloadHTMLAnchorAttributes['download']NoPrompts download of the linked resource instead of navigating to it.

Public export

Props

Bindable state

Callback events

Examples and explanation