START HERE
Getting Started
WRITE-ONCE
Write-Once Components
Declarative Surface
Photon Engine
Design System
Capabilities
Storage
Forms
Code Editor
Markdown
Mermaid
ARCHITECTURE
Architecture Overview
Package Architecture
Components
Styling
Localization
Analytics & GTM
COMPILATION
Compiler
Compile-Time Evaluation
Supported C# Features
External Type Resolution
Build Flow
RUNTIME
Runtime (TypeScript)
Performance
SERVER
Server Integration
Assets
BunPackage
Security
ECOSYSTEM
Image
Charts
Icons
Lottie
DEVELOPMENT
Visual Editor
Debug
Roadmap
PT-BR
Analytics-pt-BR
Architecture-pt-BR
Assets-pt-BR
BuildFlow-pt-BR
BunPackage-pt-BR
Capabilities-pt-BR
Charts-pt-BR
CodeEditor-pt-BR
Compiler-pt-BR
CompileTimeEvaluation-pt-BR
Components-pt-BR
Debug-pt-BR
DeclarativeSurface-pt-BR
DesignSystem-pt-BR
ExternalTypeResolution-pt-BR
Forms-pt-BR
GettingStarted-pt-BR
Home-pt-BR
Icons-pt-BR
Image-pt-BR
Localization-pt-BR
Lottie-pt-BR
Markdown-pt-BR
Mermaid-pt-BR
PackageArchitecture-pt-BR
Performance-pt-BR
Photon-pt-BR
Roadmap-pt-BR
Runtime-pt-BR
Security-pt-BR
ServerIntegration-pt-BR
Storage-pt-BR
Styling-pt-BR
SupportedFeatures-pt-BR
VisualEditor-pt-BR
WriteOnceComponents-pt-BR
ACTIONS & INPUTS
Button
IconButton
TextInput
Select
Checkbox
Switch
RadioGroup
SegmentedControl
Slider
Stepper
SearchField
SURFACES & DISPLAY
Card
Badge
Chip
Avatar
Banner
ProgressBar
EmptyState
Divider
NAVIGATION
Tabs
AppBar
BottomNavigation
Breadcrumb
Pagination
PageIndicator
Menu
Drawer
OVERLAYS
Dialog
BottomSheet
Toast
Popover
Tooltip
LISTS & DATA
List
ListView
Table
Accordion
CodeBlock
TOUCH INTERACTION
PullToRefresh
SwipeableRow
DocsActions & inputs
ButtonView source
2 min readA pressable action with the ten semantic variants and four sizes. Every dimension comes from Sizing.*(SizeVariant).
1
using eQuantic.UI.Components;
VARIANTS
Primary
Secondary
Destructive
Success
Warning
Info
Tertiary
Outline
Ghost
Link
SIZES
Small · 32px
Medium · 40px
Large · 48px
XLarge · 56px
STATES
default
disabled
loading
Usage
1
2
3
4
5
6
new Button("Save changes", Variant.Primary, SizeVariant.Medium,
onPressed: () => SetState(() => _saved = true))
{
Leading = Icons.Check,
Expand = false,
}
API
Prop
Type
Default
Description
Label
string
—
The action text. A verb first: "Save changes", not "OK".
Variant
Variant
Primary
One of the ten semantic roles; resolves to a VariantColors five-tuple from IAppTheme.
Size
SizeVariant
Medium
Small / Medium / Large / XLarge. Height, padding, gap, label size, icon size, radius and hit target all come from Sizing.
OnPressed
Action?
null
Fires on release inside the hit rect.
Leading
IconGlyph?
null
Leading glyph, sized by Sizing.Icon(Size).
Loading
bool
false
Swaps the label for a spinner and blocks input; the measured width is held.
Disabled
bool
false
Paints at theme.DisabledOpacity (0.38) and leaves the focus order.
Expand
bool
false
Fills the available cross-axis width instead of hugging the label.
States
State
Rendering
Default
Base fill, OnBase label
Pressed
Pressed fill within Motion.Press (100 ms)
Focused
theme.FocusRing outside the border
Disabled
Whole node at theme.DisabledOpacity
Loading
Spinner in place of the label; width held so layout never jumps
Accessibility
•
Role button; the accessible name is Label.
•
Destructive appends ", destructive" so the stakes are heard before the action.
•
Loading announces "busy" and suppresses the handler.
•
The hit target is Sizing.HitTarget(Size) — 48 for Small through Large, 56 for XLarge — even when the visual box is 32.
When to use
•
One Primary per region — the action you actually want taken.
•
Destructive for irreversible actions, always beside a Ghost escape.
•
Ghost or Link for tertiary actions inside dense rows.
Avoid
•
Two Primary buttons competing in one view.
•
A button where a link belongs — on web that breaks middle-click and copy-link.
•
Icon-only actions: use IconButton, which requires a label.
NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/Button.cs.