Button

About

The design system's standard button, used throughout the app. Supports a label, icon, loading state, and several visual variants.

variant: primary (default), secondary, tertiary, destructive, destructiveSoft, inverse, link, soft, neutral, outline, ghost
size: small (40px, 14px label), medium (default, 45px, 16px label) or large (54px, 16px label). Use small in dense desktop areas (toolbars, sidebars, side panels), together with the small KasyTextField
KasyButton.iconOnly(...): a circular icon-only button
icon + iconAlignment: leading, trailing, or top (icon stacked above the label)
isLoading + loadingBehavior: inline (keeps the shape, swaps content for a spinner) or shrinkToCircle (shrinks into a circle while loading)
expand: fills the available width; width: fixed width
pressEffect: depth (scales down, default on native), fill (hover-like fill, default on web), or both
backgroundColor, foregroundColor, borderColor, outlineWidth, borderRadius, backgroundGradient, fontWeight: override the variant's tokens for custom cases
hapticFeedbackEnabled: toggles light haptic feedback on press

Default corners: KasyRadius.xl (24), or a full circle for icon-only buttons.

Loading the component…

Last updated on 11/03/2026