Buttons
Mihr UI provides six button types following a clear visual hierarchy — from high-emphasis Primary to subtle Link. Every variant comes in a full size range (xxs → xxl), with icon-only constructors and leading / trailing icon slots.
Overview
Every button below is a real Flutter widget — hover, press, and focus states all work. Toggle Enabled to see disabled states, or switch the preview theme.
Primary
The highest-emphasis action — a solid brand fill. Use one per view to guide users to the primary path.
MihrPrimaryButton(
onPressed: () {},
child: const Text('Save'),
)
// Fixed sizes: .sm / .lg / .xl (md is the default)
MihrPrimaryButton.lg(
onPressed: () {},
leadingIcon: const Icon(Icons.check),
child: const Text('Confirm'),
)
// Icon-only
MihrPrimaryButton.icon(
onPressed: () {},
icon: const Icon(Icons.add),
)Soft primary
A tinted brand fill with no border — lower emphasis than Primary but still carries brand color.
MihrSoftPrimaryButton(
onPressed: () {},
child: const Text('Continue'),
)
MihrSoftPrimaryButton.lg(
onPressed: () {},
trailingIcon: const Icon(Icons.arrow_forward),
child: const Text('Continue'),
)Secondary
A bordered neutral button for supporting actions that sit alongside a Primary.
MihrSecondaryButton(
onPressed: () {},
child: const Text('Cancel'),
)
MihrSecondaryButton(
onPressed: () {},
leadingIcon: const Icon(Icons.cloud_upload),
child: const Text('Upload'),
)Tertiary
The lowest-emphasis ghost button — transparent until hovered. Ideal for toolbars and inline actions.
MihrTertiaryButton(
onPressed: () {},
child: const Text('Cancel'),
)
MihrTertiaryButton.icon(
onPressed: () {},
icon: const Icon(Icons.more_horiz),
)Link
An inline text link — no background, border, or shadow. Available in brand and gray color families.
// Brand-colored (default)
MihrLinkButton(
onPressed: () {},
child: const Text('Learn more'),
)
// Gray family
MihrLinkButton.gray(
onPressed: () {},
child: const Text('View all'),
)Destructive
For dangerous or irreversible actions. Mirrors the full hierarchy — primary, soft, secondary, tertiary, and link — in error colors.
// Solid (primary hierarchy)
MihrDestructiveButton(
onPressed: () {},
child: const Text('Delete'),
)
// Soft
MihrDestructiveButton.softPrimary(
onPressed: () {},
child: const Text('Remove'),
)
// Secondary (outlined) and Link
MihrDestructiveButton.secondary(
onPressed: () {},
child: const Text('Cancel subscription'),
)
MihrDestructiveButton.link(
onPressed: () {},
child: const Text('Delete account'),
)