Fiori Banner¶

Overview¶

The Fiori Banner component is designed to display a banner with an optional icon/avatar, a mandatory message, and up to two buttons.

Key Features¶

Displays an icon or avatar on the left, followed by a message.
Supports up to two buttons on the right (bottom right for compact screen sizes).
Automatically adjusts layout for compact, medium, and expanded screen sizes.
Animates visibility with a customizable duration for both open and close events.
Handles error states with specific icons and colors.

Usage¶

Add the Composable to Your Layout¶

Here is a basic example of how to use the Banner composable:

@Composable
fun FioriBannerExample() {
  var showBanner by rememberSaveable { mutableStateOf(true) }
  FioriBanner(
    isShown = showBanner,
    text = "This is a banner message.",
    primaryButtonText = "Action",
    secondaryButtonText = "Dismiss",
    primaryButtonAction = { showBanner = false },
    secondaryButtonAction = { /* Handle secondary button click */ }
  )
}

Parameters¶

Parameter	Type	Default Value	Description
`isShown`	`Boolean`	`false`	Whether the banner is visible.
`text`	`String`	Required	The message text to display in the banner.
`modifier`	`Modifier`	`Modifier`	Modifier to apply to the banner.
`isError`	`Boolean`	`false`	Whether the banner represents an error state.
`iconResId`	`Int`	`R.drawable.ic_sap_icon_background`	Resource ID of the icon to display.
`errorIconResourceId`	`Int`	`R.drawable.ic_sap_icon_status_circle_outlined`	Resource ID of the error icon to display.
`avatarConstruct`	`FioriAvatarConstruct?`	`null`	Optional avatar to display in the banner.
`openAnimationDuration`	`Int`	`300`	Duration of the banner's opening animation (in milliseconds).
`dismissAnimationDuration`	`Int`	`300`	Duration of the banner's closing animation (in milliseconds).
`primaryButtonText`	`String?`	`null`	Text for the primary button.
`secondaryButtonText`	`String?`	`null`	Text for the secondary button.
`primaryButtonAction`	`() -> Unit`	`{}`	Action to perform when the primary button is clicked.
`secondaryButtonAction`	`() -> Unit`	`{}`	Action to perform when the secondary button is clicked.
`styles`	`BannerStyles`	`BannerDefaults.styles()`	Styles to apply to the banner.
`colors`	`BannerColors`	`BannerDefaults.colors()`	Colors to apply to the banner.
`textStyles`	`BannerTextStyles`	`BannerDefaults.textStyles()`	Text styles to apply to the banner.

Customization¶

Icon¶

You can provide a custom icon by passing a resource ID:

FioriBanner(
  isShown = true,
  text = "This is a banner with an icon.",
  iconResId = R.drawable.ic_custom_icon
)

Avatar¶

You can display an avatar instead of an icon by providing a FioriAvatarConstruct:

FioriBanner(
  isShown = true,
  text = "This is a banner with an avatar.",
  avatarConstruct = FioriAvatarConstruct(
    ...
  )
)

Error State¶

To display the banner in an error state, set isError to true:

FioriBanner(
  isShown = true,
  text = "This is an error message.",
  isError = true
)

Custom Buttons¶

You can customize the text and actions of the primary and secondary buttons:

FioriBanner(
  isShown = true,
  text = "This is a banner with custom buttons.",
  primaryButtonText = "Retry",
  secondaryButtonText = "Cancel",
  primaryButtonAction = { /* Handle retry */ },
  secondaryButtonAction = { /* Handle cancel */ }
)

Styling and Colors¶

You can customize the styles and colors using the styles, textStyles, and colors parameters:

FioriBanner(
  isShown = true,
  text = "Custom styles example.",
  styles = YourBannerDefaults.styles(),
  textStyles = YourBannerDefaults.textStyles(),
  colors = YourBannerDefaults.colors()
)

Accessibility¶

The banner supports screen readers and keyboard navigation.
Buttons and icons are focusable and accessible.

Notes¶

If both iconResId and avatarConstruct are provided, the icon will take precedence.
The banner automatically adjusts its layout for different screen sizes.
Use openAnimationDuration and dismissAnimationDuration to control the animation timings.

Last update: April 9, 2025