OudsNavigationButton class

OUDS Navigation Button design guidelines

Reference design version : 3.3.0

Navigation Button is a UI element used for navigating between screens or pages in a sequence. It appears in different appearances and states to provide clear directional affordance.

This component is built on top of OudsButton and supports two layouts: This component is implemented as a thin wrapper around OudsButton and shares the same visual states (enabled, disabled, hovered, focused, loading).

Two layouts are available:

• OudsNavigationButtonLayout.next: label on the left, chevron (→) on the right.
• OudsNavigationButtonLayout.previous: chevron (←) on the left, label on the right.

When no label is provided, the button renders in icon-only mode. Always supply a semanticsLabel in that case to satisfy accessibility requirements.

Parameters

• layout: Direction of navigation. Required.
• appearance: Visual importance of the button. Required.
• label: Optional text label describing the navigation action.
• onPressed: Callback invoked on tap. Pass null to disable the button.
• loader: Optional Loader displaying a loading indicator inside the button.
• isFullWidth: When true, the button expands to fill the full width. Defaults to false.
• semanticsLabel: Accessibility label used in icon-only mode when no label is provided.
• package: Package name to resolve the chevron asset when it comes from a package.

Usage examples:

Next navigation button:

OudsNavigationButton(
  label: 'Next step',
  layout: OudsNavigationButtonLayout.next,
  appearance: OudsNavigationButtonAppearance.defaultAppearance,
  onPressed: () {
    // Navigate to the next screen.
  },
);


**Icon-only navigation button (accessibility label required):**
```dart
OudsNavigationButton(
  layout: OudsNavigationButtonLayout.next,
  appearance: OudsNavigationButtonAppearance.defaultAppearance,
  semanticsLabel: 'Go to next page',
  onPressed: () {},
);