Skip to main content
The ChromiaButton is a versatile button component that supports multiple variants, sizes, and states. It automatically adapts to the current theme and provides smooth animations and interactions.

​
Basic Usage

import 'package:chromia_ui/chromia_ui.dart';

ChromiaButton(
  onPressed: () => print('Button pressed'),
  child: Text('Click me'),
)

​
Variants

Buttons come in five visual variants:

​
Filled Button (Default)

The primary button variant with solid background color. 
ChromiaButton(
  variant: ChromiaButtonVariant.filled,
  onPressed: () {},
  child: Text('Filled Button'),
)

​
Outlined Button

Button with border and transparent background. 
ChromiaButton(
  variant: ChromiaButtonVariant.outlined,
  onPressed: () {},
  child: Text('Outlined Button'),
)

​
Text Button

Minimal button without background or border (ghost variant). 
ChromiaButton(
  variant: ChromiaButtonVariant.text,
  onPressed: () {},
  child: Text('Text Button'),
)

​
Tonal Button

Filled button with subtle background for lower emphasis. 
ChromiaButton(
  variant: ChromiaButtonVariant.tonal,
  onPressed: () {},
  child: Text('Tonal Button'),
)

​
Elevated Button

Button with shadow elevation. 
ChromiaButton(
  variant: ChromiaButtonVariant.elevated,
  onPressed: () {},
  child: Text('Elevated Button'),
)

​
Sizes

Buttons support three size options: 
// Small button
ChromiaButton(
  size: ChromiaButtonSize.small,
  onPressed: () {},
  child: Text('Small'),
)

// Medium button (default)
ChromiaButton(
  size: ChromiaButtonSize.medium,
  onPressed: () {},
  child: Text('Medium'),
)

// Large button
ChromiaButton(
  size: ChromiaButtonSize.large,
  onPressed: () {},
  child: Text('Large'),
)

​
With Icons

Add icons before or after the button text: 
// Leading icon
ChromiaButton(
  onPressed: () {},
  icon: Icon(Icons.add),
  iconPosition: IconPosition.leading,
  child: Text('Add Item'),
)

// Trailing icon
ChromiaButton(
  onPressed: () {},
  icon: Icon(Icons.arrow_forward),
  iconPosition: IconPosition.trailing,
  child: Text('Next'),
)

​
Loading State

Show a loading indicator: 
ChromiaButton(
  onPressed: () {},
  isLoading: true,
  child: Text('Loading...'),
)

// With custom loading widget
ChromiaButton(
  onPressed: () {},
  isLoading: true,
  loadingWidget: CircularProgressIndicator(
    strokeWidth: 2,
    valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
  ),
  child: Text('Processing'),
)

​
Full Width

Make the button take full available width: 
ChromiaButton(
  onPressed: () {},
  isFullWidth: true,
  child: Text('Full Width Button'),
)

​
Disabled State

Disable the button by setting onPressed to null: 
ChromiaButton(
  onPressed: null,
  child: Text('Disabled Button'),
)

​
Custom Styling

Override default styles with custom button style: 
ChromiaButton(
  onPressed: () {},
  style: ChromiaButtonStyle(
    backgroundColor: Colors.purple,
    foregroundColor: Colors.white,
    borderRadius: BorderRadius.circular(20),
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
  ),
  child: Text('Custom Styled'),
)

​
Long Press

Handle long press events: 
ChromiaButton(
  onPressed: () => print('Pressed'),
  onLongPress: () => print('Long pressed'),
  child: Text('Press and Hold'),
)

​
Parameters

​
onPressed
VoidCallback?
required
Callback when the button is pressed. If null, the button will be disabled.
​
child
Widget
required
The widget to display as the button content.
​
variant
ChromiaButtonVariant
default:"filled"
The button variant. Options: filled, outlined, text, tonal, elevated.
​
size
ChromiaButtonSize
default:"medium"
The button size. Options: small, medium, large.
​
style
ChromiaButtonStyle?
Custom button style to override default styling.
​
isFullWidth
bool
default:"false"
Whether the button should take full available width.
​
isLoading
bool
default:"false"
Whether the button is in loading state.
​
loadingWidget
Widget?
Custom loading widget (defaults to CircularProgressIndicator).
​
icon
Widget?
Optional icon to display alongside the child.
​
iconPosition
IconPosition
default:"leading"
Position of the icon relative to the child. Options: leading, trailing.
​
iconSpacing
double?
Spacing between icon and child.
​
onLongPress
VoidCallback?
Callback when the button is long pressed.

​
ChromiaButtonStyle Properties

The ChromiaButtonStyle class provides extensive customization options:
​
backgroundColor
Color?
The background color of the button.
​
foregroundColor
Color?
The foreground color (text and icon) of the button.
​
disabledBackgroundColor
Color?
The background color when the button is disabled.
​
disabledForegroundColor
Color?
The foreground color when the button is disabled.
​
hoverBackgroundColor
Color?
The background color when the button is hovered.
​
pressedBackgroundColor
Color?
The background color when the button is pressed.
​
borderColor
Color?
The border color of the button.
​
borderWidth
double?
The width of the button border.
​
padding
EdgeInsetsGeometry?
The padding inside the button.
​
borderRadius
BorderRadius?
The border radius of the button.
​
elevation
double?
The elevation of the button.
​
textStyle
TextStyle?
The text style for the button label.
​
minimumSize
Size?
The minimum size of the button.
​
maximumSize
Size?
The maximum size of the button.

Build docs developers (and LLMs) love

Get started for freeTalk to us