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

OudsButton

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

OUDS Button design guidelines

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. Some tokens associated with these specific colors can be customized and are identified with the Mono suffix (for instance OudsButtonTokens.colorBgDefaultEnabledMono).

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 style is equal to OudsButton.Style.Default. When false, this button will not be clickable. Has no effect when style is equal to OudsButton.Style.Loading.

style

The OudsButton.Style used for the button. Use OudsButton.Style.Default for a standard button, or OudsButton.Style.Loading 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 android.R
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox

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

import android.R
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox

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, style: OudsButton.Style = OudsButtonDefaults.Style, hierarchy: OudsButton.Hierarchy = OudsButtonDefaults.Hierarchy, interactionSource: MutableInteractionSource? = null)

OUDS Button design guidelines

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.

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

style

The OudsButton.Style used for the button. Use OudsButton.Style.Default for a standard button, or OudsButton.Style.Loading 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 android.R
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox

fun main() { 
   //sampleStart 
   OudsButton(
    icon = OudsButton.Icon(
        painterResource(id = R.drawable.star_on),
        "Content description"
    ),
    onClick = { /* Do something! */ }
) 
   //sampleEnd
}

import android.R
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox

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(
            painterResource(id = R.drawable.star_on),
            "Content description"
        ),
        onClick = { /* Do something! */ }
    )
} 
   //sampleEnd
}

@Composable

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

OUDS Button design guidelines

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 text + icon.

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

style

The OudsButton.Style used for the button. Use OudsButton.Style.Default for a standard button, or OudsButton.Style.Loading 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 android.R
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox

fun main() { 
   //sampleStart 
   OudsButton(
    icon = OudsButton.Icon(
        painterResource(id = R.drawable.star_on),
        "Content description"
    ),
    label = "Label",
    onClick = { /* Do something! */ }
) 
   //sampleEnd
}

import android.R
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import com.orange.ouds.core.component.OudsButton
import com.orange.ouds.core.component.OudsColoredBox

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(
            painterResource(id = R.drawable.star_on),
            "Content description"
        ),
        label = "Label",
        onClick = { /* Do something! */ }
    )
} 
   //sampleEnd
}