Button
Displays a button or a component that looks like a button
Divergence from Blok
Additive convenience parameters on top of Blok's pass-through API. Blok's Button is a thin wrapper that forwards props to a native <button>; content, icons, and events come through children and spread props. We add explicit Title (string label, saves wrapping text in <Button>plain text</Button>), StartIconSvg/EndIconSvg (pass an IconSvg.X path and we render the icon + spacing for you), Click (EventCallback), and an explicit Disabled parameter. Blok-style composition with ChildContent still works; the additive parameters are opt-in.
Examples
Default
Variants
Sizes
Color Schemes
Icon only
Icon with text
Loading
Disabled
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Button | Renders a native <button> with Blok's variant/size/color system. Accepts ChildContent for full composition, or the Title + icon convenience parameters for simple labelled buttons. |
Button
Renders a native <button> with Blok's variant/size/color system. Accepts ChildContent for full composition, or the Title + icon convenience parameters for simple labelled buttons.
| Property | Type | Required | Description |
|---|---|---|---|
| Variant | ButtonVariant | Visual style. Default: ButtonVariant.Default. Other values: Outline, Ghost, Link. | |
| ColorScheme | ButtonColor? | Colour palette. When null, resolves to Primary for Default/Link variants and Neutral for Outline/Ghost. | |
| Size | ButtonSize | Size token. Default: ButtonSize.Default. Other values: Xs, Sm, Lg, Icon, IconLg, IconSm, IconXs. | |
| Title | string? | Convenience text label. Use instead of wrapping a plain string in ChildContent. Ignored when ChildContent is supplied. | |
| StartIconSvg | string? | IconSvg path to render before the label. Only used when ChildContent is not supplied. | |
| EndIconSvg | string? | IconSvg path to render after the label. Only used when ChildContent is not supplied. | |
| Click | EventCallback | Invoked when the button is clicked. Additional to Blok. | |
| Disabled | bool | When true, the button is non-interactive and visually muted. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the button's class attribute. | |
| ChildContent | RenderFragment? | Contents of the button. When supplied, overrides Title and the icon convenience parameters. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the underlying <button>. |