Option Button

An action button component that represents compact information elements, choices, filters or actions.

The OptionButton widget provides a flexible way to display small interactive elements with various visual styles. Option buttons can include text labels, icons, avatars and support different states and interactions.

• Types: Filled, Outline, Avatar variations
• Content Types: Text with optional icons or avatar
• States: Normal, Active, Disabled, Error
• Customizable: Supports different styles, icons and full width mode

---

Variants

Filled

Basic option button with solid background.

Preview

Code

OptionButton(
  label: 'Label',
  onPressed: () {},
)

---

Outline

Option Button with transparent background and border.

Preview

Code

OptionButton(
  label: 'Label',
  type: Option ButtonType.outline,
  onPressed: () {},
)

---

With Prefix Icon

Option Button with an icon before the label.

Preview

Code

OptionButton(
  label: 'Label',
  prefixIcon: Icon(Icons.add, size: 16),
  onPressed: () {},
)

---

With Suffix Icon

Option Button with an icon after the label.

Preview

Code

OptionButton(
  label: 'Label',
  suffixIcon: Icon(Icons.clear, size: 16),
  onPressed: () {},
)

---

With Avatar

Option Button with a circular avatar image.

Preview

Code

OptionButton(
  label: 'Label',
  avatar: 'https://picsum.photos/200',
  onPressed: () {},
)

---

Disabled State

Non-interactive option button with disabled styling.

Preview

Code

const OptionButton(
  label: 'Label',
  state: Option ButtonState.disabled,
)

---

Error State

Option Button indicating an error condition.

Preview

Code

const OptionButton(
  label: 'Label',
  state: Option ButtonState.error,
)

---

Full Width

Option Button that expands to fill container width.

Preview

Code

OptionButton(
  label: 'Label',
  fullWidth: true,
  onPressed: () {},
)

---

Properties

Property	Type	Description
label	String	Required. The text to be displayed in the option button.
prefixIcon	Widget?	Widget to display before the label, typically an icon.
suffixIcon	Widget?	Widget to display after the label, typically an action icon.
avatar	String?	URL of an avatar image to display at the start of the option button.
type	Option ButtonType	Visual style variant of the option button (filled, outline, etc). Default: filled.
state	Option ButtonState	Interaction state affecting appearance (enabled, disabled, error, etc). Default: enabled.
isActive	bool	Whether the option button is in selected/active state. Changes colors when true. Default: false.
fullWidth	bool	Makes the option button expand to fill container width. Default: false.
onPressed	VoidCallback?	Callback function when the option button is tapped. If null, option button appears disabled.