Button — Playground

px
shape
appearance
size
State
html.html
<button kuiButton type="button" appearance="primary">Save changes</button>
NameTypeDefaultDescription
shape'solid' | 'soft' | 'outline' | 'ghost''solid'Surface treatment. Defaults to solid. Combines freely with appearance.
appearance'primary' | 'danger' | 'success' | 'warning' | nullnullSemantic color intent. Without an explicit value, solid/soft use primary colors and outline/ghost use neutral defaults.
size'xs' | 'sm' | 'md' | 'lg''md'Control height and spacing size.
wrapbooleanfalseAllows long button text to wrap instead of truncating in narrow containers.
disabledbooleanfalseDisables native button behavior. Anchor buttons receive aria-disabled and leave tab order.
loadingbooleanfalseCenters a kui-loader spinner over the button content, preserves layout size, sets aria-busy, and behaves like disabled.
iconStartKuiIconName | undefinedundefinedRenders a kui-icon resolved by name before the projected content, without hand-projecting kui-icon.
iconEndKuiIconName | undefinedundefinedRenders a kui-icon resolved by name after the projected content, without hand-projecting kui-icon.
kuiProvideButtonOptions(options)Provider-Scopes repeated defaults for kuiButton and kuiIconButton. Local inputs win over button options, and button options win over root defaults.size.
KUI_BUTTON_OPTIONSInjectionToken<KuiButtonOptions>-Provider token behind button-family defaults, with separate button and iconButton branches.

Inputs and provider defaults verified against @kikita-labs/ui v1.6.1 public typings.