PrimitiveButton

A highly customizable button component that adheres to the “Primitive UI” philosophy: accessible logic with distinct visual variants.

Overview

The PrimitiveButton abstracts away the complexity of managing different button states (hover, press, disabled, loading) and visual styles (primary, secondary, ghost, etc.) into a single, cohesive API.

Primitive Button VariantsOpen in new tab ↗

Basic Usage


import 'package:primitive_ui/primitive_ui.dart';
 
// Default Primary Button
PrimitiveButton(
  onPressed: () => print('Clicked'),
  child: Text('Submit'),
)
 
// Destructive Variant
PrimitiveButton(
  variant: PrimitiveButtonVariant.destructive,
  onPressed: () => deleteItem(),
  child: Text('Delete'),
)
 
// Loading State
PrimitiveButton(
  isLoading: true,
  onPressed: () {},
  child: Text('Saving...'),
)

API Reference

Parameter	Type	Required	Default	Description
`onPressed`	`VoidCallback?`	✓	`—`	Callback invoked when the button is pressed. If null, the button is disabled.
`variant`	`PrimitiveButtonVariant`	✗	`primary`	The visual style of the button (primary, secondary, outline, ghost, destructive, link).
`size`	`PrimitiveButtonSize`	✗	`md`	The size of the button (sm, md, lg, icon).
`isLoading`	`bool`	✗	`false`	If true, shows a spinner and disables interaction.
`leading`	`Widget?`	✗	`null`	A widget to display before the child (e.g., an Icon).
`trailing`	`Widget?`	✗	`null`	A widget to display after the child.
`isDisabled`	`bool`	✗	`false`	If true, visually grays out the button and prevents interaction.

Philosophy

This component bridges the gap between raw GestureDetector primitives and high-level Material buttons. It provides:

State Management: Handles hover and press animations automatically.
Visual Consistency: Enforces a design system via the variant prop.
Flexibility: Allows for arbitrary children while providing smart defaults for text and icons.