Card →

Button

Clickable action — 8 variants × 8 sizes, focus ring, press feedback.

ui actions

Preview

Installation

cargo slintcn add button

Usage

import { Button, ButtonVariant, ButtonSize } from "slintcn/components/button.slint";

Button {
    variant: ButtonVariant.default;
    size: ButtonSize.lg;
    text: "Ship it";
    clicked => { /* … */ }
}

Properties

variant in ButtonVariant

Visual style — default, secondary, outline, ghost, link, destructive, success, glow.

size in ButtonSize

Height + horizontal padding preset — xs, sm, default, lg, xl, xxl, xxxl, icon.

text in string

Label rendered inside the button.

disabled in bool

When true, the button dims and stops firing `clicked`.

haspopup in bool

When true, this button opens a popup/menu; like vega's aria-haspopup it opts out of the 1px press dip.

clicked callback ()

Fired on press release while enabled.

API

ButtonVariantdefaultoutlinesecondaryghostlinkdestructiveglowglass

ButtonSizexssmdefaultlgiconicon-xsicon-smicon-lg

Accessibility

focusableyes

keyboardEnterSpace

Dependencies

focus-ring

Installed automatically as transitive dependencies of slintcn add button.

Card →