Button

Preview

componentPreview.loading

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, medium (default), large — adjusts height/padding, text stays 16 across all sizes
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.

Last updated on 08/23/2026