Skip to content

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:

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:

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:

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 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 = {},
)

Negative Tonal Button

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

Tint Tonal Button

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:

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 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 = {},
)

Negative Text Button

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

Neutral Text Button

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:

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:

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:

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:

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 = {}
)

Negative Tonal Icon Button

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

Tint Tonal Icon Button

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:

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:

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 = {}
)

Negative Standard Icon Button

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

Tint Standard Icon Button

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: April 5, 2024