Actions

FabMenu

A floating button that opens a few related actions.

iOSSwiftUI MenuAndroidMaterial 3 FloatingActionButtonMenuRenders in a Screen or an Island

iOSSwiftUI Menu

AndroidMaterial 3 FloatingActionButtonMenu

Import

import {FabMenu, type MenuAction} from '@hzblj/kara-ui'

Props

A floating action button that unfolds into its actions. Android: Material 3 Expressive's FloatingActionButtonMenu — the button turns into a close and the actions rise above it as labelled pills. iOS: the same button as the label of a SwiftUI Menu. A native atom — it renders inside <Screen> or <Island>.

Prop	Type	Description
actions*	MenuAction[]	The actions the button unfolds into.
icon	IconName	The closed button's icon — one of the app's. A plus by default.
testID	string	Test identifier, forwarded to the SwiftUI `Menu`. iOS only — Android ignores it.

actions*

MenuAction[]

The actions the button unfolds into.

icon

IconName

The closed button's icon — one of the app's. A plus by default.

testID

string

Test identifier, forwarded to the SwiftUI Menu. iOS only — Android ignores it.

MenuAction

One action of a Menu, an ActionSheet, a ContextMenu or a FabMenu.

Prop	Type	Description
label*	string	The action's text. Rows are keyed by it, so keep labels unique within one list.
onPress*	() => void	Called when the action is chosen; the menu closes by itself.
destructive	boolean	Draws the action in the destructive colour — the system's destructive role on iOS. `FabMenu` ignores it on Android.
icon	IconName	One of the app's icons, before the label. `ContextMenu` and `FabMenu` show it on both platforms, `Menu` and `ActionSheet` on Android only.

label*

string

The action's text. Rows are keyed by it, so keep labels unique within one list.

onPress*

() => void

Called when the action is chosen; the menu closes by itself.

destructive

boolean

Draws the action in the destructive colour — the system's destructive role on iOS. FabMenu ignores it on Android.

icon

IconName

One of the app's icons, before the label. ContextMenu and FabMenu show it on both platforms, Menu and ActionSheet on Android only.

Platform notes

Android: Material 3 Expressive’s FAB menu — the button turns into a close and the actions rise above it as pills.
iOS: the same round button as the label of a SwiftUI Menu.