Button¶

The Fiori Compose UI provides several Button controls that use the Fiori Horizon theme, including Filled Button, Tonal Button, Text Button, Filled Icon Button, Tonal Icon Button and Standard Icon Button.

Filled Button, Tonal Button, and Text Button display a label on the button and may contain an optional leading or trailing icon.

Filled Icon Button, Tonal Icon Button, and Standard Icon Button display an icon on the button and may contain an optional label at the bottom of the icon.

Filled Button¶

Filled Button has a solid light blue container and white font color. Developers can display a label-only Filled Button by calling the FioriFilledButton Composable function with a title in the buttonContent argument:

FioriFilledButton(
    buttonContent = FioriButtonContent(
        title = "Button"
    ),
    onClick = {}
)

Label-only Filled Button:

Filled Button can have an optional leading or trailing icon. The icon is specified using FioriButtonContent.icon and the icon position is set by FioriButtonContent.displayIconAtStart:

FioriFilledButton(
    buttonContent = FioriButtonContent(
        title = "Button",
        icon = FioriIcon(R.drawable.baseline_done_white_24dp),
        displayIconAtStart = false
    ),
    onClick = {}
)

Filled Button with icon:

Tonal Button¶

Tonal Button has a solid light gray container and black font color. Developers can display a label-only Tonal Button by calling the FioriTonalButton Composable function with a title in the buttonContent argument:

FioriTonalButton(
    buttonContent = FioriButtonContent(
        title = "Button"
    ),
    onClick = {}
)

Label-only Tonal Button:

Tonal Button can have an optional leading or trailing icon. The icon is specified using FioriButtonContent.icon, and the icon position is set using FioriButtonContent.displayIconAtStart:

FioriTonalButton(
    buttonContent = FioriButtonContent(
        title = "Button",
        icon = FioriIcon(R.drawable.baseline_done_white_24dp),
        displayIconAtStart = true
    ),
    onClick = {}
)

Tonal Button with icon:

Tonal Button can have a Negative semantic type. Negative Tonal Button has a light pink container and red font color. Use the semanticType = FioriButtonSemanticType.Negative argument to display a Negative Tonal Button:

FioriTonalButton(
    buttonContent = FioriButtonContent(
        title = "Button",
        icon = FioriIcon(R.drawable.done_white)
    ),
    semanticType = FioriButtonSemanticType.Negative,
    onClick = {},
)

Text Button¶

Text Button has a transparent container and light blue font color. Developers can display a label-only Text Button by calling the FioriTextButton Composable function with a title in the buttonContent argument:

FioriTextButton(
    buttonContent = FioriButtonContent(
        title = "Button"
    ),
    onClick = {}
)

Label-only Text Button:

Text Button can have an optional leading or trailing icon. The icon is specified using FioriButtonContent.icon, and icon position is set using FioriButtonContent.displayIconAtStart:

FioriTextButton(
    buttonContent = FioriButtonContent(
        title = "Button",
        icon = FioriIcon(R.drawable.baseline_done_white_24dp),
        displayIconAtStart = false
    ),
    onClick = {}
)

Text Button with icon:

Text Button can have a Negative semantic type. Negative Text Button has a transparent container and red font color. Use the semanticType = FioriButtonSemanticType.Negative argument to display a Negative Text Button:

FioriTextButton(
    buttonContent = FioriButtonContent(
        title = "Button"
    ),
    semanticType = FioriButtonSemanticType.Negative,
    onClick = {},
)

Filled Icon Button¶

Filled Icon Button has a solid light blue container and white icon color. Developers can display an icon-only Filled Icon Button by calling the FioriFilledIconButton Composable function with an icon argument:

FioriFilledIconButton(
    icon = FioriIcon(
        resId = R.drawable.baseline_done_white_24dp,
        contentDescription = "icon button"
    ),
    onClick = {}
)

Icon-only Filled Icon Button:

Filled Icon Button can have an optional label. The label is specified using the label argument:

FioriFilledIconButton(
    icon = FioriIcon(
        resId = R.drawable.baseline_done_white_24dp,
        contentDescription = "icon button"
    ),
    label = "Label",
    onClick = {}
)

Filled Icon Button with label:

Tonal Icon Button¶

Tonal Icon Button has a solid light gray container and black icon color. Developers can display an icon-only Tonal Icon Button by calling the FioriTonalIconButton Composable function with an icon argument:

FioriTonalIconButton(
    icon = FioriIcon(
        resId = R.drawable.baseline_done_white_24dp,
        contentDescription = "icon button"
    ),
    onClick = {}
)

Icon-only Tonal Icon Button:

Tonal Icon Button can have an optional label. The label is specified using the label argument:

FioriTonalIconButton(
    icon = FioriIcon(
        resId = R.drawable.baseline_done_white_24dp,
        contentDescription = "icon button"
    ),
    label = "Label",
    onClick = {}
)

Tonal Icon Button with label:

Standard Icon Button¶

Standard Icon Button has a transparent container and blue icon color. Developers can display an icon-only Standard Icon Button by calling the FioriStandardIconButton Composable function with an icon argument:

FioriStandardIconButton(
    icon = FioriIcon(
        resId = R.drawable.baseline_done_white_24dp,
        contentDescription = "icon button"
    ),
    onClick = {}
)

Icon-only Standard Icon Button:

Standard Icon Button can have an optional label. The label is specified using the label argument:

FioriStandardIconButton(
    icon = FioriIcon(
        resId = R.drawable.baseline_done_white_24dp,
        contentDescription = "icon button"
    ),
    label = "Label",
    onClick = {}
)

Standard Icon Button with label:

Customizing Style¶

All the Fiori Buttons support customizing the style using colors, shape, styles, or textStyles arguments.

For details, see:

API Reference¶

See Package com.sap.cloud.mobile.fiori.compose.button.ui.

Last update: February 20, 2023