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.ic_sap_icon_accept),
        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.ic_sap_icon_accept),
        displayIconAtStart = true
    ),
    onClick = {}
)

Tonal Button with icon:

Tonal Buttons can have a semantic type that defines the default colors of the container and font. There are three semantic types:

Neutral - The default semantic type, which has a light gray container and the black font color.
Negative - The Negative Tonal Button has a light pink container and the red font color.
Tint - The Tint Tonal Button has a light blue container and the blue font color.

Use the semanticType argument to display a Tonal Button with semantic type:

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

FioriTonalButton(
    buttonContent = FioriButtonContent(
        title = "Button",
        icon = FioriIcon(R.drawable.ic_sap_icon_accept)
    ),
    semanticType = FioriButtonSemanticType.Tint,
    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.ic_sap_icon_accept),
        displayIconAtStart = false
    ),
    onClick = {}
)

Text Button with icon:

Text Buttons can have a semantic type that defines the default font color. There are three semantic types:

Tint - The default semantic type, which has the light blue font color.
Neutral - The Neutral Text Button has the black font color.
Negative - The Negative Text Button has the red font color.

Use the semanticType argument to display a Text Button with semantic type:

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

FioriTextButton(
    buttonContent = FioriButtonContent(
        title = "Button"
    ),
    semanticType = FioriButtonSemanticType.Neutral,
    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.ic_sap_icon_accept,
        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.ic_sap_icon_accept,
        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.ic_sap_icon_accept,
        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.ic_sap_icon_accept,
        contentDescription = "icon button"
    ),
    label = "Label",
    onClick = {}
)

Tonal Icon Button with label:

The Tonal Icon button can have a semantic type that defines the default colors of the container and the icon. There are three semantic types:

Neutral - The default semantic type, which has a light gray container and a black icon color.
Negative - This semantic type has a light pink container and a red icon color.
Tint - This semantic type has a light blue container and a blue icon color.

Use the semanticType argument to display a Tonal Icon button of a particular semantic type:

FioriTonalIconButton(
    icon = FioriIcon(
        resId = R.drawable.ic_sap_icon_accept,
        contentDescription = "icon button"
    ),
    label = "Label",
    semanticType = FioriButtonSemanticType.Negative,
    onClick = {}
)

FioriTonalIconButton(
    icon = FioriIcon(
        resId = R.drawable.ic_sap_icon_accept,
        contentDescription = "icon button"
    ),
    label = "Label",
    semanticType = FioriButtonSemanticType.Tint,
    onClick = {}
)

Standard Icon Button¶

The Standard Icon button has a transparent container and black 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.ic_sap_icon_accept,
        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.ic_sap_icon_accept,
        contentDescription = "icon button"
    ),
    label = "Label",
    onClick = {}
)

Standard Icon Button with label:

The Standard Icon button can have a semantic type that defines the default icon color. There are three semantic types:

Neutral - The default semantic type, which displays the icon and label in black.
Tint - This semantic type displays the icon and label in blue.
Negative - This semantic type displays the icon and label in red.

Use the semanticType argument to display a Standard Icon button of a particular semantic type:

FioriStandardIconButton(
    icon = FioriIcon(
        resId = R.drawable.ic_sap_icon_accept,
        contentDescription = "icon button"
    ),
    label = "Label",
    semanticType = FioriButtonSemanticType.Negative,
    onClick = {}
)

FioriStandardIconButton(
    icon = FioriIcon(
        resId = R.drawable.ic_sap_icon_accept,
        contentDescription = "icon button"
    ),
    label = "Label",
    semanticType = FioriButtonSemanticType.Tint,
    onClick = {}
)

Floating Action Button¶

A Floating Action Button (FAB) is designed for the most common and important action item on a screen. FAB remains fixated on the screen when users scroll through the content. There are 4 four types of FAB: default FAB, small FAB, large FAB, and extended FAB. Users can call FioriFloatActionButton for the default type, FioriSmallFloatActionButton for the small type, FioriLargeFloatActionButton for the large type, and FioriExtendedFloatActionButton for the extended type.

Below is an example of how to use the default FAB type, as well as the small and large types, all of which share the same parameters.```

FioriFloatActionButton(
buttonContent = FabButtonItem(
    FioriIcon(resId = R.drawable.ic_sap_icon_email),
    tooltip = "email ",
    expandIcon = FioriIcon(resId = R.drawable.ic_cancel_white_24px),
    description = "email "
),
onSubFabClick = { id, item ->
    showToast(context, "button No   $id clicked ${item.tooltip}")
},
modifier = Modifier
    .align(Alignment.CenterEnd)
    .offset(x = (-16).dp),

onClick = {

    showToast(context = context, "email button clicked")
},
styles = FioriFloatActionButtonDefaults.styles(dragAble = true),
colors = if (fabStyle.value == 1) FioriFloatActionButtonDefaults.primaryColors()
else FioriFloatActionButtonDefaults.secondaryColors()
)

Extended Floating Action Button:

Extended Floating Action Button can have an optional label or an optional icon. Compared to the other 3 types of FAB, extended FAB has an additional parameter expanded. FAB will only display the icon when expanded is set to false.

FioriExtendedFloatActionButton(
buttonContent = ExtendFabButtonItem(
    icon = FioriIcon(resId = R.drawable.ic_sap_icon_accept),
    label = "Accept",
    tooltip = "Accept",
    description = "Accept"
),
expanded = !expand,
modifier = Modifier
    .align(Alignment.CenterEnd)
    .offset(x = (-16).dp),
colors = if (fabStyle.value == 1) FioriExtendedFloatActionButtonDefaults.primaryColors()
else FioriExtendedFloatActionButtonDefaults.secondaryColors()
)

Sub FAB:

Every FAB type can define its sub-FAB by using the parameter subFABs.

FioriFloatActionButton(
buttonContent = FabButtonItem(
    FioriIcon(resId = R.drawable.ic_sap_icon_email),
    tooltip = "email ",
    expandIcon = FioriIcon(resId = R.drawable.ic_cancel_white_24px),
    description = "email "
),
subFABs = listOf(
    FabButtonItem(
        icon = FioriIcon(resId = R.drawable.ic_sap_icon_phone),
        tooltip = "phone",
        description = "phone "
    ),
    FabButtonItem(
        icon = FioriIcon(resId = R.drawable.ic_sap_icon_video),
        tooltip = "video",
        description = "video "
    ),
    FabButtonItem(
        icon = FioriIcon(resId = R.drawable.ic_sap_icon_email),
        tooltip = "email",
        description = "email "
    )
),
onSubFabClick = { id, item ->
    showToast(context, "button No   $id clicked ${item.tooltip}")
},
modifier = Modifier
    .align(Alignment.CenterEnd)
    .offset(x = (-16).dp),

onClick = {

    showToast(context = context, "email button clicked")
},
styles = FioriFloatActionButtonDefaults.styles(dragAble = true),
colors = if (fabStyle.value == 1) FioriFloatActionButtonDefaults.primaryColors()
else FioriFloatActionButtonDefaults.secondaryColors()
)

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: August 7, 2024