OudsNavigationButton
Navigation button is a UI element that allows to move between different pages within a multipage interface. Navigation button is typically arrange in sequence to indicate the user's current position and provide controls to access previous, next, or specific pages.
This version of the navigation button allows to display a label. Another API is available for this component if you only need a navigation chevron icon.
Note that if it is placed in an OudsColoredBox, its monochrome variant is automatically displayed.
Rounded corners can be enabled or disabled using the com.orange.ouds.theme.OudsThemeSettings.roundedCornerButtons property in the settings of the theme provided when calling the com.orange.ouds.core.theme.OudsTheme method.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 3.2.0 |
Parameters
Label displayed in the button describing the navigation action. This makes the action more explicit and accessible especially for new users or in contexts where clarity is critical.
Layout of the navigation button determining the chevron to display and its position in the button. See OudsNavigationButtonLayout for allowed values.
Callback invoked when the button is clicked.
Modifier applied to the button.
An optional loading progress indicator displayed in the button to indicate an ongoing operation.
Appearance of the button among OudsNavigationButtonAppearance values. A button with OudsButtonAppearance.Brand is not allowed as a direct or indirect child of an OudsColoredBox and will throw an IllegalStateException.
An optional hoisted MutableInteractionSource for observing and emitting interactions for this button. Note that if null is provided, interactions will still happen internally.
Samples
OudsNavigationButton(
label = "Next",
layout = OudsNavigationButtonLayout.Next,
onClick = { /* Navigate to next screen */ }
)Navigation button is a UI element that allows to move between different pages within a multipage interface. Navigation button is typically arrange in sequence to indicate the user's current position and provide controls to access previous, next, or specific pages.
This version of the navigation button only displays navigation chevron icon. Another API is available for this component if you need to also display a label in the navigation button.
Note that if it is placed in an OudsColoredBox, its monochrome variant is automatically displayed.
Rounded corners can be enabled or disabled using the com.orange.ouds.theme.OudsThemeSettings.roundedCornerButtons property in the settings of the theme provided when calling the com.orange.ouds.core.theme.OudsTheme method.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 3.2.0 |
Parameters
Layout of the navigation button determining the chevron to display. See OudsNavigationButtonLayout for allowed values.
Callback invoked when the button is clicked.
Modifier applied to the button.
An optional loading progress indicator displayed in the button to indicate an ongoing operation.
Appearance of the button among OudsNavigationButtonAppearance values. A button with OudsButtonAppearance.Brand is not allowed as a direct or indirect child of an OudsColoredBox and will throw an IllegalStateException.
An optional hoisted MutableInteractionSource for observing and emitting interactions for this button. Note that if null is provided, interactions will still happen internally.
Samples
OudsNavigationButton(
layout = OudsNavigationButtonLayout.Next,
onClick = { /* Navigate to next screen */ }
)