IconButton
Render a compact Flutter icon action with a required accessible label.
Render a compact icon action with a required accessible label.
Contract
| Axis | Contract |
|---|---|
| Intent | intent accepts neutral, primary, info, success, warning, and danger; the default is neutral. |
| Emphasis | appearance accepts solid, outline, and ghost; the default is solid. Emphasis changes without changing intent. |
| Size | uiSize accepts md and lg; the default is md. Each size sets a square target and its icon size from the shared control metrics. |
| State | A null onPressed disables the button. loading also blocks activation, replaces the icon with a spinner, and keeps the square footprint. |
An icon alone carries no accessible name, so label is required. Name the action the button performs, such as Add rack, rather than the icon it shows.
Install
Add the package, then import its public library.
flutter pub add tinyrack_uiimport 'package:tinyrack_ui/tinyrack_ui.dart';Playground
Usage
import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';
TRIconButton(
label: 'Add rack',
icon: const Icon(Icons.add),
onPressed: addRack,
)Examples
Action states permalink
Loading replaces the icon with a spinner and uses loadingLabel as the temporary accessible name. A null onPressed keeps the button visible but inactive.
Appearance permalink
Choose solid for the strongest emphasis, outline for a visible boundary, and ghost for low-emphasis toolbar actions.
Action intent permalink
Use primary for the main action and danger only for destructive actions. Neutral is the default for ordinary toolbar controls.
Sizes permalink
Each size sets a square target and its icon size together. Match the size to the controls beside the button and keep an adequate target for touch input.
API
TRIconButton properties
| Prop | Type / default | Purpose |
|---|---|---|
icon | Widget · required | Renders the single icon child. Its size comes from uiSize, so an explicit size is unnecessary. |
label | String · required | Sets the accessible name exposed through Semantics, and acts as the fallback for loadingLabel. |
onPressed | VoidCallback? · required | Receives taps. Passing null disables the button and applies the disabled opacity token. |
appearance | TRAppearance · TRAppearance.solid | Selects solid, outline, or ghost emphasis. |
intent | TRIntent · TRIntent.neutral | Selects the semantic color role shared with the web system. |
uiSize | TRUiSize · TRUiSize.md | Sets the square dimension and icon size together. Match it to the controls beside the button. |
loading | bool · false | Blocks activation and replaces the icon with a small TRSpinner while work is in progress. |
loadingLabel | String? · null | Replaces the accessible name while loading is true. When omitted, label stays in place. |