Buttons — FlexCore Showcase

Overview

ButtonControl renders one <button>. Variants are CSS classes, colors come from --fx-btn-* variables, and any attribute it does not recognise is forwarded to the element. Give it DropDownContent and it becomes a popup trigger that closes on click-away without JavaScript.

Examples

#Variants, icons and sizes

The default look comes from the theme variables; add one btn-* class for a semantic color. IconCss renders a leading icon, a trailing icon is ordinary content, and btn-sm / btn-lg change the size. Icon-only buttons need Title and aria-label. RoundedButtonControl is a pill-shaped subclass with four Variant colors. The CSS tab shows how a region is rethemed through --fx-btn-*.

Example

Razor

CSS

Documentation

Parameters

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	—	Button label or any markup.
`CssClass`	`string?`	`null`	Appended after `fx-button`. Variant and size classes go here.
`IconCss`	`string?`	`null`	Class list for a leading icon span. Any icon font works.
`Disabled`	`bool`	`false`	Sets the native `disabled` attribute; hover and active styles are suppressed.
`OnClick`	`EventCallback<MouseEventArgs>`	—	Click handler. In dropdown mode it fires before the panel toggles.
`ButtonType`	`string`	`"button"`	Native `type`: button, submit or reset.
`Title`	`string?`	`null`	Native tooltip. Required on icon-only buttons.
`Style`	`string?`	`null`	Inline style. Useful for per-button CSS variables.
`TabIndex`	`int?`	`null`	Native `tabindex`.
`AutoFocus`	`bool`	`false`	Focuses the button once after first render, unless disabled.
`BareStyle`	`bool`	`false`	Omits the `fx-button` base class so host CSS owns the look.
`StopPropagation`	`bool`	`false`	Stops the click bubbling to ancestors that also handle clicks.
`PreventMouseDownDefault`	`bool`	`false`	Keeps focus where it was on mousedown. For editor formatting buttons.
`DropDownContent`	`RenderFragment?`	`null`	When set, the button toggles a popup panel beneath itself.
`DropDownCssClass`	`string?`	`null`	Extra class on the popup panel.
`(unmatched attributes)`	`Dictionary<string,object>`	—	Forwarded to the button: `id`, `name`, `form`, `accesskey`, `aria-`, `data-`. Explicit parameters win.
`RoundedButtonControl.Variant`	`string`	`"muted"`	Pill subclass only: `accent`, `muted`, `success` or `danger`.

Methods

Method	Inputs	Returns	Description
`FocusAsync()`	—	`ValueTask`	Focuses the element without scrolling. Capture the component with `@ref`.
`CloseDropDown()`	—	`void`	Closes the popup, for example after a menu item is picked.

CSS classes

Class	Effect
`btn-primary · btn-secondary · btn-success · btn-warning · btn-danger`	Filled semantic colors.
`btn-outline-primary`	Transparent fill, blue border and text; fills on hover.
`btn-sm · btn-lg`	Compact and large padding and font size.
`fx-button-classic`	Win32 3D bevel, MS Sans Serif, square corners. For migrated VB6 forms.
`mini-btn · fx-dialog-btn`	Compact grid-cell button; dialog footer padding.

CSS variables

Variable	Fallback	Purpose
`--fx-btn-bg / --fx-btn-color`	`#f7f7f7 / #333`	Resting fill and text.
`--fx-btn-border / --fx-btn-border-color`	`1px solid #c9c9c9`	Border shorthand and per-side color (Win32 bevel).
`--fx-btn-radius`	`4px`	Corner radius.
`--fx-btn-hover-bg / --fx-btn-hover-border`	`#e6e6e6 / the --fx-btn-border value`	Hover state.
`--fx-btn-active-bg`	`#b6b6b6`	Pressed state.
`--fx-btn-shadow`	`none`	Box shadow.
`--fx-font-size × --fx-zoom`	`13px × 1`	Font size; zoom scales every FlexCore control together.

Keyboard and accessibility

Renders a real <button>: Space and Enter activate it, it takes part in forms, and screen readers announce its role.
Icon-only buttons need Title plus aria-label; the icon span carries no text.
Dropdown mode sets aria-haspopup and aria-expanded.
Inside DialogControl, Enter fires the default button through DefaultButtonScope; a control that needs Enter for itself calls ConsumeEnter().

Own pages: Split button, Toggle buttons (ToggleButtonControl and ButtonGroupControl), Floating action button.
SaveButtonControl and CancelButtonControl are presets of this control.
ToolbarControl and ToolbarButtonControl: Control tour.
Default button on Enter: Dialogs.
RibbonControl: home page.