core/com.orange.ouds.core.component/OudsButton

OudsButton

fun OudsButton(label: String, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, loader: OudsButton.Loader? = null, hierarchy: OudsButton.Hierarchy = OudsButtonDefaults.Hierarchy, interactionSource: MutableInteractionSource? = null)

Buttons are interactive elements designed to trigger specific actions or events when tapped by a user.

This version of the button uses the text only layout which is the most used layout. Other layouts are available for this component: text + icon and icon only.

Note that in the case 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 OudsTheme.Settings.buttonRoundedCorners property of an OudsTheme.Settings when calling the com.orange.ouds.core.theme.OudsTheme method.

Design

Guidelines	unified-design-system.orange.com
Version	3.0.0

Parameters

label

Label displayed in the button which describes the button action. Use action verbs or phrases to tell the user what will happen next.

onClick

Callback invoked when the button is clicked.

modifier

Modifier applied to the button.

enabled

Controls the enabled state of the button when there is no loader. When false, this button will not be clickable. Has no effect when loader is not null.

loader

An optional loading progress indicator displayed in the button to indicate an ongoing operation.

hierarchy

The button appearance based on its OudsButton.Hierarchy. A button with OudsButton.Hierarchy.Negative hierarchy is not allowed as a direct or indirect child of an OudsColoredBox and will throw an IllegalStateException.

interactionSource

An optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. Note that if null is provided, interactions will still happen internally.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsButton(
    label = "Label",
    onClick = { /* Do something! */ }
) 
   //sampleEnd
}

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsColoredBox(color = OudsColoredBox.Color.StatusInfoEmphasized) {
    // The colors of this button are automatically adjusted to maximize the contrast with the colored background.
    OudsButton(
        label = "Label",
        onClick = { /* Do something! */ }
    )
} 
   //sampleEnd
}

@Composable

fun OudsButton(icon: OudsButton.Icon, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, loader: OudsButton.Loader? = null, hierarchy: OudsButton.Hierarchy = OudsButtonDefaults.Hierarchy, interactionSource: MutableInteractionSource? = null)

Buttons are interactive elements designed to trigger specific actions or events when tapped by a user.

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.

Rounded corners can be enabled or disabled using the OudsTheme.Settings.buttonRoundedCorners property of an OudsTheme.Settings when calling the com.orange.ouds.core.theme.OudsTheme method.

Design

Guidelines	unified-design-system.orange.com
Version	3.0.0

Parameters

icon

Icon displayed in the button. Use an icon to add additional affordance where the icon has a clear and well-established meaning.

onClick

Callback invoked when the button is clicked.

modifier

Modifier applied to the button.

enabled

Controls the enabled state of the button when there is no loader. When false, this button will not be clickable. Has no effect when loader is not null.

loader

An optional loading progress indicator displayed in the button to indicate an ongoing operation.

hierarchy

interactionSource

An optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. Note that if null is provided, interactions will still happen internally.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsButton(
    icon = OudsButton.Icon(
        imageVector = Icons.Filled.FavoriteBorder,
        contentDescription = "Content description"
    ),
    onClick = { /* Do something! */ }
) 
   //sampleEnd
}

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsColoredBox(color = OudsColoredBox.Color.StatusInfoEmphasized) {
    // The colors of this button are automatically adjusted to maximize the contrast with the colored background.
    OudsButton(
        icon = OudsButton.Icon(
            imageVector = Icons.Filled.FavoriteBorder,
            contentDescription = "Content description"
        ),
        onClick = { /* Do something! */ }
    )
} 
   //sampleEnd
}

@Composable

fun OudsButton(icon: OudsButton.Icon, label: String, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, loader: OudsButton.Loader? = null, hierarchy: OudsButton.Hierarchy = OudsButtonDefaults.Hierarchy, interactionSource: MutableInteractionSource? = null)

Buttons are interactive elements designed to trigger specific actions or events when tapped by a user.

This version of the button uses the text + icon layout which should remain specific to some 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.

Rounded corners can be enabled or disabled using the OudsTheme.Settings.buttonRoundedCorners property of an OudsTheme.Settings when calling the com.orange.ouds.core.theme.OudsTheme method.

Design

Guidelines	unified-design-system.orange.com
Version	3.0.0

Parameters

icon

Icon displayed in the button. Use an icon to add additional affordance where the icon has a clear and well-established meaning.

label

Label displayed in the button which describes the button action. Use action verbs or phrases to tell the user what will happen next.

onClick

Callback invoked when the button is clicked.

modifier

Modifier applied to the button.

enabled

Controls the enabled state of the button when there is no loader. When false, this button will not be clickable. Has no effect when loader is not null.

loader

An optional loading progress indicator displayed in the button to indicate an ongoing operation.

hierarchy

interactionSource

An optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. Note that if null is provided, interactions will still happen internally.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsButton(
    icon = OudsButton.Icon(
        imageVector = Icons.Filled.FavoriteBorder,
        contentDescription = ""
    ),
    label = "Label",
    onClick = { /* Do something! */ }
) 
   //sampleEnd
}

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsColoredBox(color = OudsColoredBox.Color.StatusInfoEmphasized) {
    // The colors of this button are automatically adjusted to maximize the contrast with the colored background.
    OudsButton(
        icon = OudsButton.Icon(
            imageVector = Icons.Filled.FavoriteBorder,
            contentDescription = ""
        ),
        label = "Label",
        onClick = { /* Do something! */ }
    )
} 
   //sampleEnd
}