CNButtonStyle enum

Visual styles for CNButton and related controls.

iOS provides several button styles following Apple's Human Interface Guidelines. Each style has specific use cases and visual treatment. Choose the style based on the button's role and importance in the UI hierarchy.

Style Guide

Minimal Emphasis

  • plain: Text-only, minimal visual weight. Use for secondary or tertiary actions that don't need prominence. Example: "Cancel" or "Learn More" links.

Subtle Background

  • gray: Subtle gray background. Use for tertiary actions that need slightly more visual weight than plain. Example: "Maybe Later" or "Skip".

Moderate Emphasis

  • tinted: Uses the accent color for text. Moderate emphasis without background. Use for main actions within grouped controls. Example: "Edit" in a list item.

Bordered Styles

  • bordered: Clear border, no background fill. Use for important secondary actions. Example: "Cancel" button paired with filled action button.
  • borderedProminent: Bordered with accent color. High emphasis bordered style. Example: "Delete" with confirmation border.

Filled Styles

  • filled: Solid background with accent color. Primary action button. Use only one per screen. Example: "Save", "Send", "Create".
  • glass: Modern frosted glass effect with blur background (iOS 16+/macOS 13+). Use for premium visual polish. Example: Overlay buttons on images.
  • prominentGlass: More prominent glass effect. Use for primary actions with glass aesthetic.

Best Practices

  1. One Primary Button: Use filled for the primary action only
  2. Visual Hierarchy: Use style to show importance - prominent > bordered > gray > plain
  3. Grouping: Use consistent styles for related buttons
  4. Touch Targets: Ensure all buttons meet 44pt minimum height (Apple guideline)
  5. Disable Instead of Hide: Use disabled state rather than removing unavailable buttons

Usage Example

Row(
  children: [
    CNButton(
      label: 'Cancel',
      style: CNButtonStyle.plain,
      onPressed: () {},
    ),
    CNButton(
      label: 'Save',
      style: CNButtonStyle.filled,
      onPressed: () {},
    ),
  ],
)
Inheritance
Available extensions

Values

plain → const CNButtonStyle

Minimal, text-only style.

gray → const CNButtonStyle

Subtle gray background style.

tinted → const CNButtonStyle

Tinted/filled text style.

bordered → const CNButtonStyle

Bordered button style.

borderedProminent → const CNButtonStyle

Prominent bordered (accent-colored) style.

filled → const CNButtonStyle

Filled background style.

glass → const CNButtonStyle

Glass effect (iOS 16+/macOS 13+ look-alike).

prominentGlass → const CNButtonStyle

More prominent glass effect.

Properties

hashCode → int
The hash code for this object.
no setterinherited
index → int
A numeric identifier for the enumerated value.
no setterinherited
name → String

Available on Enum, provided by the EnumName extension

The name of the enum value.
no setter
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited

Constants

values → const List<CNButtonStyle>
A constant List of the values in this enum, in order of their declaration.