OudsButton
Button is a UI element that triggers an action or event, and is used to initiate tasks or confirming an action. Button appears in different layouts, styles and states to indicate hierarchy or emphasis.
This version of the button uses the text only layout, which is the most common layout. Other layouts are available for this component: text + icon and icon only.
Note that if it is placed in an OudsColoredBox, its monochrome variant is automatically displayed. The tokens associated with these specific colors can be customized by overriding OudsButtonMonoTokens.
Rounded corners can be enabled or disabled using the 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 button action. Use action verbs or phrases to tell the user what will happen next.
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 OudsButtonAppearance values. A button with OudsButtonAppearance.Negative 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
OudsButton(
label = "Label",
onClick = { /* Do something! */ }
)OudsColoredBox(color = OudsColoredBoxColor.StatusInfoEmphasized) {
// The colors of this button are automatically adjusted to maximize the contrast with the colored background.
OudsButton(
label = "Label",
onClick = { /* Do something! */ }
)
}Button is a UI element that triggers an action or event, and is used to initiate tasks or confirming an action. Button appears in different layouts, styles and states to indicate hierarchy or emphasis.
This version of the button uses the icon only layout, which is typically used in business or back-office interfaces. It is rarely used alone (usually part of a group of elements). Other layouts are available for this component: text only and text + icon.
Note that if it is placed in an OudsColoredBox, its monochrome variant is automatically displayed. The tokens associated with these specific colors can be customized by overriding OudsButtonMonoTokens.
Rounded corners can be enabled or disabled using the 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
Icon displayed in the button. Use an icon to add additional affordance where the icon has a clear and well-established meaning.
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 OudsButtonAppearance values. A button with OudsButtonAppearance.Negative 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
OudsButton(
icon = OudsButtonIcon(
imageVector = Icons.Filled.FavoriteBorder,
contentDescription = "Content description"
),
onClick = { /* Do something! */ }
)OudsColoredBox(color = OudsColoredBoxColor.StatusInfoEmphasized) {
// The colors of this button are automatically adjusted to maximize the contrast with the colored background.
OudsButton(
icon = OudsButtonIcon(
imageVector = Icons.Filled.FavoriteBorder,
contentDescription = "Content description"
),
onClick = { /* Do something! */ }
)
}Button is a UI element that triggers an action or event, and is used to initiate tasks or confirming an action. Button appears in different layouts, styles and states to indicate hierarchy or emphasis.
This version of the button uses the text + icon layout, which should remain specific to clearly identified contexts (e.g., the use of an icon with a "Play" button is standard in the context of TV or video streaming). Other layouts are available for this component: text only and icon only.
Note that if it is placed in an OudsColoredBox, its monochrome variant is automatically displayed. The tokens associated with these specific colors can be customized by overriding OudsButtonMonoTokens.
Rounded corners can be enabled or disabled using the 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
Icon displayed in the button. Use an icon to add additional affordance where the icon has a clear and well-established meaning.
Label displayed in the button describing the button action. Use action verbs or phrases to tell the user what will happen next.
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 OudsButtonAppearance values. A button with OudsButtonAppearance.Negative 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
OudsButton(
icon = OudsButtonIcon(
imageVector = Icons.Filled.FavoriteBorder,
contentDescription = ""
),
label = "Label",
onClick = { /* Do something! */ }
)OudsColoredBox(color = OudsColoredBoxColor.StatusInfoEmphasized) {
// The colors of this button are automatically adjusted to maximize the contrast with the colored background.
OudsButton(
icon = OudsButtonIcon(
imageVector = Icons.Filled.FavoriteBorder,
contentDescription = ""
),
label = "Label",
onClick = { /* Do something! */ }
)
}