Controls

AppBar

Package: com.microsoft.fluentui.tokenized

An app bar appears at the top of an app screen, below the status bar, and enables navigation through a series of hierarchical screens. When a new screen is displayed, a back button, often labeled with the title of the previous screen, appears on the left side of the bar. Sometimes, the right side of a navigation bar contains a control, like an Edit or a Done button, for managing the content within the active view. In a split view, a navigation bar may appear in a single pane of the split view. Navigation bars are translucent, may have a background tint, and can be configured to hide when the keyboard is onscreen, a gesture occurs, or a view resizes.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for Non-Mandatory Parameters
title	String	Title Of the current page	Yes	N/A
modifier	Modifier	Optional Modifier for updating appbar	No	Modifier
appBarSize	AppBarSize	Enum to define App Bar Size	No	AppBarSize.Medium
style	FluentStyle	Fluent Style of AppBar	No	FluentStyle.Neutral
subTitle	String?	Subtitle to be displayed	No	null
logo	@Composable (() -> Unit)?	Composable to be placed at left of Title	No	null
searchMode	Boolean	Boolean to enable/disable searchMode	No	false
navigationIcon	FluentIcon	Navigate Back Icon to be placed at extreme left	No	null
postTitleIcon	FluentIcon	Icon to be placed after title making the title clickable	No	FluentIcon()
preSubtitleIcon	FluentIcon	Icon to be placed before subtitle	No	FluentIcon()
postSubtitleIcon	FluentIcon	Icon to be placed after subtitle	No	FluentIcon(ListItemIcons.Chevron, contentDescription = LocalContext.current.resources.getString(R.string.fluentui_chevron))
rightAccessoryView	@Composable (RowScope.() -> Unit)?	Row Placeholder to be placed at right on AppTitle	No	null
searchBar	@Composable (RowScope.() -> Unit)?	Composable to be placed as searchbar below appTitle	No	null
bottomBar	@Composable (RowScope.() -> Unit)?	Composable to Be placed below appTitle	No	null
bottomBorder	Boolean	Boolean to place a bottom border on AppBar. Applies only when searchBar and bottomBar are empty	No	true
appTitleDelta	Float	Ratio of opening of appTitle	No	1.0F
accessoryDelta	Float	Ratio of opening of accessory View	No	1.0F
appBarTokens	AppBarTokens?	Optional Tokens for App Bar to customize it	No	null
centerAlignAppBar	Boolean?	center align app bar	No	false

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns background brush.	Brush
navigationIconColor	Returns navigation icon color.	Color
titleIconColor	Returns title icon color.	Color
subtitleIconColor	Returns subtitle icon color.	Color
titleTextColor	Returns title text color.	Color
titleTypography	Returns title text style.	TextStyle
subtitleTypography	Returns subtitle text style.	TextStyle
leftIconSize	Returns left icon size.	Dp
titleIconSize	Returns title icon size.	Dp
subtitleIconSize	Returns subtitle icon size.	Dp
navigationIconPadding	Returns navigation icon padding.	PaddingValues
textPadding	Returns text padding.	PaddingValues
height	Returns app bar height.	Dp

Avatar

Package: com.microsoft.fluentui.tokenized.persona

API to generate an avatar for a Person. Avatar behavior uses person image(if available), Initials generated from First and Last name of Person(if provided) or Anonymous Icons otherwise (as set in AvatarTokens).

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for Non-Mandatory Parameters
person	Data Class	Data Class for the person whose Avatar is to be generated	Yes	N/A
modifier	Modifier	Optional Modifier for avatar	No	Modifier
size	AvatarSize	Set Size of Avatar	No	AvatarSize.Size32
enableActivityRings	Boolean	Enable/Disable Activity Rings on Avatar	No	false
enableActivityDot	Boolean	Enable/Disable Activity dot on Avatar	No	false
enablePresence	Boolean	Enable/Disable Presence Indicator on Avatar, if cutout is provided then presence indicator is not displayed	No	true
cutoutIconDrawable	Int?	cutout drawable	No	null
cutoutIconImageVector	ImageVector?	cutout image vector	No	null
cutoutStyle	CutoutStyle	shape of the cutout	No	CutoutStyle.Circle
cutoutContentDescription	String?	accessibility description for the cutout	No	null
cutoutColorFilter	ColorFilter	cutout icon color	No	null
avatarToken	AvatarTokens?	Token to provide appearance values to Avatar	No	null

Control Tokens

Token	Description	Return Type
avatarStyle	Returns style	AvatarStyle
fontTypography	Returns typography	TextStyle
avatarSize	Returns size	Dp
icon	Returns icon	ImageVector
foregroundColor	Returns foreground color	Color
backgroundBrush	Returns background brush	Brush
presenceIcon	Returns presence icon	FluentIcon
presenceOffset	Returns presence offset	DpOffset
cornerRadius	Returns corner radius	Dp
borderStroke	Returns border stroke	List<BorderStroke>
cutoutCornerRadius	Returns cutout corner radius	Dp
cutoutBackgroundColor	Returns cutout background color	Color
cutoutBorderColor	Returns cutout border color	Color
cutoutIconSize	Returns cutout icon size	Dp

Avatar Carousel

Package: com.microsoft.fluentui.tokenized.persona

Generate an AvatarCarousel. This is a horizontally scrollable bar which is made up of AvatarCarouselItem. Avatar Carousel internally is a group of AvatarCarouselItem which can be used to create onClick based Avatar buttons.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for Non-Mandatory Parameters
avatarList	List	List of Avatars to be created in a carousel	Yes	N/A
modifier	Modifier	Optional Modifier for Avatar carousel	No	Modifier
size	AvatarCarouselSize	size of the carousel	No	AvatarCarouselSize.Small
enablePresence	Boolean	enable/disable presence indicator on avatar	No	false
avatarTokens	AvatarTokens?	Token to provide appearance values to Avatar	No	null
avatarCarouselTokens	AvatarCarouselTokens?	Token to provide appearance values to Avatar Carousel	No	null

Control Tokens

Token	Description	Return Type
avatarSize	Returns the size of the avatar	AvatarSize
backgroundBrush	Returns the background brush	StateBrush
textColor	Returns the text color	StateColor
subTextColor	Returns the subtext color	StateColor
textTypography	Returns the typography style of the text	TextStyle
subTextTypography	Returns the typography style of the subtext	TextStyle
padding	Returns the padding	Dp
unreadDotBorderStroke	Returns the border stroke for unread dot	BorderStroke
unreadDotBackgroundBrush	Returns the background brush for unread dot	Brush
unreadDotSize	Returns the size for unread dot	Dp
unreadDotOffset	Returns the offset for unread dot	Dp

Avatar Group

Package: com.microsoft.fluentui.tokenized.persona

API to create a group of Avatar. This can be done in 3 formats, AvatarGroupStyle.Stack, AvatarGroupStyle.Pile or AvatarGroupStyle.Pie. Stack has negative spacing between Avatars whereas Pile has positive. Activity Rings Can be enabled in both type of Groups, but presence indicator can be seen only in Pile. Avatar pie shows two to three avatars in a single circular container. It's used in cases where space is exteremely limited.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for Non-Mandatory Parameters
group	Group	[Group] of people whose Avatar has to be created	Yes	N/A
modifier	Modifier	Optional modifier for AvatarGroup	No	Modifier
size	AvatarSize	Set size of AvatarGroup	No	AvatarSize.Size32
style	AvatarGroupStyle	Set style of AvatarGroup	No	AvatarGroupStyle.Stack
maxVisibleAvatar	Int	Maximum number of avatars to be displayed. If number is less than total Group size, Overflow Avatar is added	No	DEFAULT_MAX_AVATAR
enablePresence	Boolean	Enable/Disable Presence Indicator in Avatars. Works only for [AvatarGroupStyle.Pile]	No	false
enableActivityDot	Boolean	Enable/Disable Activity dot on Avatar group. Works only for [AvatarGroupStyle.Stack]	No	false
avatarToken	AvatarTokens?	Token to provide appearance values to Avatar	No	null
avatarGroupToken	AvatarGroupTokens?	Token to provide appearance values to AvatarGroup	No	null

Control Tokens

Token	Description	Return Type
avatarSize	Returns the size of the avatar	Dp
fontInfo	Returns the text style for the avatar	TextStyle
spacing	Returns the spacing between avatars	Dp
pilePadding	Returns the padding for a pile of avatars	Dp
avatarSize	Returns the size of the avatar	Dp

Badge

Package: com.microsoft.fluentui.tokenized.notification

Badge represents dynamic information such as a number of pending requests on tab.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
modifier	Modifier	The [Modifier] to be applied to this item.	No	Modifier
text	String?	Text to display, if not provided then it appear as dot.	No	null
badgeType	BadgeType	Badge type could be [BadgeType.Character] to use it on tab or [BadgeType.List] to use in List.	No	BadgeType.List
badgeTokens	BadgeTokens	BadgeTokens provide appearance values. If not provided then tokens will be picked from AppThemeController.	No	null

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the brush for the badge background	Brush
textColor	Returns the color for the badge text	Color
typography	Returns the text style for the badge	TextStyle
padding	Returns the padding for the badge	PaddingValues
borderStroke	Returns the border stroke for the badge	BorderStroke
cornerRadius	Returns the corner radius for the badge	Dp

Basic Controls

Package: com.microsoft.fluentui.tokenized.controls

Toggle Switch

API to create a Toggle Switch. This switch toggles state on tap and swipe gestures. The two states of toggle are mutually exclusive.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
modifier	Modifier	Optional modifier for Toggle Switch.	No	Modifier
onValueChange	((Boolean) -> Unit)	Function to be invoked when state of switch changes.	Yes	N/A
enabledSwitch	Boolean	Boolean to enable/disable switch.	No	true
checkedState	Boolean	Boolean representing current state of switch.	No	false
interactionSource	MutableInteractionSource	Interaction Source for user interactions.	No	remember { MutableInteractionSource() }
switchTokens	ToggleSwitchTokens?	Tokens to customize Toggle Switch's design.	No	null

Control Tokens

Token	Description	Return Type
trackColor	Returns the color of the track for a toggle switch.	StateColor
knobColor	Returns the color of the knob for a toggle switch.	StateColor
elevation	Returns the elevation of a toggle switch.	StateElevation

Check Box

API to create a checkbox. A checkbox is a type of button that lets the user choose between two opposite states, actions, or values. A selected checkbox is considered on when it contains a checkmark and off when it's empty. A checkbox is almost always followed by a title unless it appears in a checklist.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
onCheckedChange	((Boolean) -> Unit)	Function to be invoked when checked state changes.	Yes	N/A
modifier	Modifier	Optional Modifier for CheckBox.	No	Modifier
enabled	Boolean	Boolean for enabling/disabling CheckBox.	No	true
checked	Boolean	Boolean for checked state of control.	No	false
interactionSource	MutableInteractionSource	Interaction source for User gesture Management.	No	remember { MutableInteractionSource() }
checkBoxTokens	CheckBoxTokens?	Tokens for customizing CheckBox design.	No	null

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the background brush for a check box.	StateBrush
iconColor	Returns the color of the check box icon.	StateColor
borderStroke	Returns the border stroke for a check box.	StateBorderStroke

Radio Button

API to create a Radio Button. A Radio selection lets user choose one option out of all values. This API provides a single instance of radio button and not a group.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
onClick	(() -> Unit)	OnClick method to be invoked when clicked on the radio button.	Yes	N/A
modifier	Modifier	Optional modifier for Radio Button.	No	Modifier
enabled	Boolean	Boolean for enabling/disabling Radio Button.	No	true
selected	Boolean	Boolean for setting selected state in radio Button.	No	false
interactionSource	MutableInteractionSource	Interaction Source for user gesture management.	No	remember { MutableInteractionSource() }
radioButtonTokens	RadioButtonTokens?	Tokens for customizing Radio buttons.	No	null

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the background brush for a radio button.	StateBrush
iconColor	Returns the color of the radio button icon.	StateColor

Banner

Package: com.microsoft.fluentui.tokenized.notification

A Banner displays a prominent message and related actions for users to address it. Banners are used to inform users about important changes or persistent conditions. They are non-modal, meaning users can either interact or ignore them and continue with their task.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for Non-Mandatory Parameters
text	String	The text to be displayed in the banner.	Yes	N/A
modifier	Modifier	The modifier to be applied to the component.	No	Modifier
isTextCentered	Boolean	Whether the text should be centered or not. Text is centered when there is no leading icon, action button, or accessory buttons.	No	false
leadingIcon	@Composable (() -> Unit)?	The icon to be displayed before the text.	No	null
actionButtonOnClick	() -> Unit	The callback to be invoked when the action button is clicked.	Yes	N/A
actionButtonText	String?	The text to be displayed on the action button. ActionButtonIcon will be replaced when this is set.	No	null
actionButtonIcon	@Composable (() -> Unit)?	The icon to be displayed on the action button. ActionButtonText should not be set to display the icon.	No	null
accessoryTextButton1	String?	The text to be displayed on the first accessory button.	No	null
accessoryTextButton2	String?	The text to be displayed on the second accessory button.	No	null
accessoryTextButton1OnClick	() -> Unit	The callback to be invoked when the first accessory button is clicked.	No	null
accessoryTextButton2OnClick	() -> Unit	The callback to be invoked when the second accessory button is clicked.	No	null
bannerTokens	BannerTokens?	The tokens to be used to customize the component.	No	null

Control Tokens

Token	Description	Return Type
backgroundColor	Returns the background color for a banner.	Brush
textColor	Returns the text color for a banner.	Color
actionIconColor	Returns the color for the action icon in a banner.	Color
leadingIconColor	Returns the color for the leading icon in a banner.	Color
actionButtonColor	Returns the color for the action button in a banner.	Color
leadingIconSize	Returns the size of the leading icon in a banner.	Dp
actionIconSize	Returns the size of the action icon in a banner.	Dp
padding	Returns the padding values for a banner.	PaddingValues
textTypography	Returns the text typography for a banner.	TextStyle
actionButtonTextTypography	Returns the typography for the action button text.	TextStyle
leadingIconAndTextSpacing	Returns the spacing between the leading icon and text.	Dp
textAndActionButtonSpacing	Returns the spacing between text and the action button.	Dp
accessoryActionButtonsSpacing	Returns the spacing for accessory action buttons.	Dp
textAndAccessoryButtonSpacing	Returns the spacing between text and accessory button.	Dp

Bottom Drawer

Package: com.microsoft.fluentui.tokenized.drawer

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
modifier	Modifier	Optional modifier for the drawer.	No	Modifier
drawerState	DrawerState	State of the drawer.	No	rememberDrawerState()
slideOver	Boolean	If true, then BottomDrawer would be drawn in full length & only covering up to half screen when open & it get slided more in the visible region on expand. If false then, the BottomDrawer end at the bottom & hence the content get only the visible region height to draw itself. The default value is true.	No	true
expandable	Boolean	If true drawer would expand on drag else drawer open till fixed/wrapped height. The default value is true.	No	true
scrimVisible	Boolean	Create obscures background when scrim visible set to true when the drawer is open. The default value is true.	No	true
showHandle	Boolean	If true drawer handle would be visible. The default value is true.	No	true
drawerTokens	DrawerTokens?	Tokens to provide appearance values. If not provided then drawer tokens will be picked from [FluentTheme].	No	null
drawerContent	@Composable () -> Unit	Composable that represents content inside the drawer.	Yes	N/A
preventDismissalOnScrimClick	Boolean	when true, the drawer will not be dismissed when the scrim is clicked/ tapped	No	false
onScrimClick	() -> Unit	callback to be invoked when the scrim is clicked	No	{}

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the background brush for a drawer.	Brush
handleColor	Returns the color of the handle for a drawer.	Color
elevation	Returns the elevation of a drawer.	Dp
scrimColor	Returns the color of the scrim for a drawer.	Color
scrimOpacity	Returns the opacity of the scrim for a drawer.	Float

Bottom Sheet

Package: com.microsoft.fluentui.tokenized.bottomsheet

Bottom sheets present a set of choices while blocking interaction with the rest of the screen. They are an alternative to inline menus and simple dialogs, providing additional room for content, iconography, and actions.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
sheetContent	@Composable () -> Unit	The content of the BottomSheet.	Yes	N/A
modifier	Modifier	Optional [Modifier] for the entire component.	No	Modifier
sheetState	BottomSheetState	The state of the bottom sheet.	No	rememberBottomSheetState(BottomSheetValue.Hidden)
expandable	Boolean	If true BottomSheet would expand on drag else BottomSheet open till peeked/wrapped height. The default value is true	No	true
peekHeight	Dp	The visible height of the BottomSheet in [BottomSheetValue.Shown] state. The peek height should be less than or equal to half screen height. If more than half of the screen height provided, then peek height would be consider half of the screen height.	No	110.dp
scrimVisible	Boolean	Create obscures background when scrim visible set to true when the BottomSheet expand. Scrim also blocks interaction with the rest of the screen when visible. The default value is true	No	true
showHandle	Boolean	If true, the handle would be visible on top of the BottomSheet. The default value is true.	No	true
slideOver	Boolean	If true, then sheetContent would be drawn in full length & it just get slided in the visible region. If false then, the sheetContainer placed at the bottom & its height could be at peekHeight, fullheight or hidden when dragged by Handle or swipe down.	No	true
enableSwipeDismiss	Boolean	if false, bottomSheet will not be dismissed after swipe down gesture.	No	false
bottomSheetTokens	BottomSheetTokens?	Tokens to provide appearance values. If not provided then bottomSheet tokens will be picked from [AppThemeController].	No	null
content	@Composable () -> Unit	The content of rest of the screen.	Yes	N/A

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the background brush for a bottom sheet.	Brush
handleColor	Returns the color of the handle for a bottom sheet.	Color
elevation	Returns the elevation of a bottom sheet.	Dp
cornerRadius	Returns the corner radius of a bottom sheet.	Dp
scrimColor	Returns the color of the scrim for a bottom sheet.	Color
scrimOpacity	Returns the opacity of the scrim for a bottom sheet.	Float

Button

Package: com.microsoft.fluentuidemo.demos

API to create a button, containing icon as well as text.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for non-mandatory parameters
onClick	function	OnClick behaviour for the button	Yes	N/A
modifier	Modifier	Optional modifier for Button	No	Modifier
style	enum	Style of Button.	No	ButtonStyle.Button
size	enum	Size of Button.	No	ButtonSize.Medium
enabled	boolean	Boolean for enabling/disabling button.	No	true
interactionSource	InteractionSource	Interaction Source to handle user interactions	No	remember{ InteractionSource() }
icon	ImageVector	ImageVector for Icon Content on button.	No	null
text	string	String to be displayed as text on button.	No	null
contentDescription	string	Content Description for Icon.	No	null
buttonTokens	ButtonTokens	Tokens to customize appearance of button.	No	null

Control Tokens

Token	Description	Return Type
iconColor	Sets the icon color	StateColor
textColor	Sets the text color	StateColor
backgroundBrush	Sets the background color	StateBrush
borderStroke	Sets the border width and color	StateBorderStroke
cornerRadius	Sets the corner's radius	Dp
iconSize	Sets the Icon's size	Dp
typography	Sets the formatting of the text	TextStyle
padding	Sets the padding for the content in Button	PaddingValues
spacing	Sets the spacing between icon and text	Dp
fixedHeight	Sets the height for the button	Dp

FloatingActionButton

Package: com.microsoft.fluentui.tokenized.controls

API to create a Floating Action Button. This button has elevation and can be expanded and collapsed. In expanded state, Icon + Text are displayed. In collapsed state, only icon is displayed.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for non-mandatory parameters
onClick	function	OnClick behaviour for the button	Yes	N/A
modifier	Modifier	Optional Modifier for FAB	No	Modifier
state	enum	State the FAB is supposed to be in.	No	FABState.Expanded
size	enum	Size of the FAB.	No	FABSize.Large
enabled	boolean	Boolean for enabling/disabling FAB.	No	true
interactionSource	InteractionSource	Interaction Source for user interactions.	No	remember { MutableInteractionSource() }
icon	ImageVector	ImageVector for Icon to be displayed.	No	null
text	string	String to be displayed.	No	null
fabTokens	FABTokens	Tokens to customize design of FAB.	No	null

Control Tokens

Token	Description	Return Type
iconColor	Returns the color of the icon for a FAB.	StateColor
textColor	Returns the color of the text for a FAB.	StateColor
backgroundBrush	Returns the background brush for a FAB.	StateBrush
borderStroke	Returns the border stroke for a FAB.	StateBorderStroke
iconSize	Returns the size of the icon for a FAB.	Dp
typography	Returns the typography for the text on a FAB.	TextStyle
iconPadding	Returns the padding around the icon on a FAB.	PaddingValues
textPadding	Returns the padding around the text on a FAB.	PaddingValues
spacing	Returns the spacing between the icon and text on a FAB.	Dp
fixedHeight	Returns the fixed height of a FAB.	Dp
minWidth	Returns the minimum width of a FAB.	Dp
elevation	Returns the elevation of a FAB.	StateElevation

Basic Chip

Package: com.microsoft.fluentui.tokenized.controls

Chip is a compact representation of entities (most commonly, people) that can be typed in, deleted, or dragged easily.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for Non-Mandatory Parameters
label	String	Label for the chip.	Yes	N/A
modifier	Modifier	Modifier for the chip.	No	Modifier
enabled	Boolean	Whether the chip is enabled or disabled. Enabled by default.	No	true
selected	Boolean	Whether the chip is selected or unselected. Unselected by default.	No	false
leadingAccessory	@Composable (() -> Unit)?	Leading accessory for the chip.	No	null
trailingAccessory	@Composable (() -> Unit)?	Trailing accessory for the chip.	No	null
onClick	() -> Unit	onClick action for the chip.	Yes	N/A
interactionSource	InteractionSource?	Optional interactionSource.	No	null
basicChipTokens	BasicChipTokens?	Optional tokens for the chip.	No	null

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the background brush for a basic chip.	StateBrush
textColor	Returns the text color for a basic chip.	StateColor
cornerRadius	Returns the corner radius of a basic chip.	Dp
typography	Returns the typography for a basic chip.	TextStyle
padding	Returns the padding values for a basic chip.	PaddingValues
horizontalSpacing	Returns the horizontal spacing for a basic chip.	Dp

Basic Card

Package: com.microsoft.fluentui.tokenized.controls

Cards are flexible containers that group related content and actions together. They reveal more information upon interaction. A Basic card is a card with an empty container and basic elevation and radius.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
modifier	Modifier	Modifier for the card	No	Modifier
basicCardTokens	BasicCardTokens?	Optional tokens for customizing the card	No	null
content	@Composable () -> Unit	Content for the card	Yes	N/A

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the background brush for a basic card.	Brush
cornerRadius	Returns the corner radius of a basic card.	Dp
elevation	Returns the elevation of a basic card.	Dp
borderColor	Returns the border color of a basic card.	Color
borderStrokeWidth	Returns the border stroke width of a basic card.	Dp

Card Nudge

Package: com.microsoft.fluentui.tokenized.notification

A card nudge is a short message that helps people discover what they can do in an app. It appears at the top of a screen, beneath the navigation bar, and pushes all other content below it. Card nudges are helpful for sending reminders and recommendations, but they don’t necessarily relates to someone’s current task.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
metadata	CardNudgeMetaData	[CardNudgeMetaData] Storing the information for the Nudge to be displayed.	Yes	N/A
modifier	Modifier	Optional Modifier to be applied to CardNudge.	No	Modifier
outlineMode	Boolean	Boolean for enabling outline on CardNudge. Default: [false]	No	false
cardNudgeTokens	CardNudgeTokens?	Optional Tokens for customizing CardNudge.	No	N/A

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the background brush for a card nudge.	Brush
iconColor	Returns the color of the icons on a card nudge.	Color
dismissIconColor	Returns the color of the dismiss Icon on a card nudge	Color
accentColor	Returns the accent color for a card nudge.	Color
iconBackgroundBrush	Returns the background brush for the icons on a card nudge.	Brush
titleTypography	Returns the typography for the title on a card nudge.	TextStyle
accentTypography	Returns the typography for the accent text on a card nudge.	TextStyle
subtitleTypography	Returns the typography for the subtitle on a card nudge.	TextStyle
borderStrokeColor	Returns the color of the border stroke for a card nudge.	Color
borderSize	Returns the size of the border for a card nudge.	Dp
iconSize	Returns the size of the icon on a card nudge.	Dp
iconBackgroundSize	Returns the size of the background for the left icon on a card nudge.	Dp
dismissIconSize	Returns the size of the dismiss icon on a card nudge.	Dp

Citation

Package: com.microsoft.fluentui.tokenized.notification

A citation is used to refer a certain text or a quotation from another source. It contains a single text value, usually a number.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
text	String	Text for the citation. Usually a number.	Yes	N/A
onClick	(() -> Unit)?	onClick method for citation. Usually to provide the reference information.	No	null
modifier	Modifier	Optional modifier for the citation.	No	Modifier
citationTokens	CitationTokens?	Optional tokens to customize appearance.	No	null

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the background brush for a citation.	Brush
cornerRadius	Returns the corner radius of a citation.	Dp
borderBrush	Returns the border brush for a citation.	Brush
borderStrokeWidth	Returns the border stroke width of a citation.	Dp
textColor	Returns the text color of a citation.	Color
textTypography	Returns the typography of the text on a citation.	TextStyle
textPadding	Returns the padding around the text on a citation.	PaddingValues

Contextual Command Bar

Package: com.microsoft.fluentui.tokenized.contextualcommandbar

Generate a Contextual Command Bar. This is a horizontally scrollable bar which is made up of [CommandGroup]. Command group internally is a group of [CommandItem] which can be used to create onClick and onLongClick based buttons. It also consist of an optional icon based action button which can be placed at either side of the CCB. If enabled, by default this button acts as a Keyboard Dismiss button.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
groups	List	List of Groups to be created in a context.	Yes	N/A
modifier	Modifier	Optional Modifier for CCB.	No	Modifier
actionButtonPosition	ActionButtonPosition	Enum to specify if we will have an Action Button and its position.	No	ActionButtonPosition.End
actionButtonIcon	FluentIcon	FluentIcon for The Action Button Icon.	No	FluentIcon(CCBIcons.Keyboarddismiss, contentDescription = LocalContext.current.resources.getString(R.string.fluentui_dismiss))
scrollable	Boolean	Boolean value to specify if CCB has fixed or infinite width(Scrollable). Use false to create a fixed non scrollable CCB. Command groups widths will adhere to the weights set in [CommandGroup] weight parameter. Use true to have a scrollable CCB. [CommandGroup] weight parameter is ignored.	No	true
contextualCommandBarTokens	ContextualCommandBarTokens?	Token to provide appearance values to Avatar.	No	null

Control Tokens

Token	Description	Return Type
actionButtonBackgroundBrush	Returns a brush for the background of the action button.	Brush
actionButtonIconColor	Returns the color of the icon on the action button.	Color
actionButtonIconPadding	Returns the padding values for the icon on the action button.	PaddingValues
actionButtonGradient	Returns a list of colors for the gradient on the action button.	List<Color>
actionButtonGradientWidth	Returns the width of the gradient on the action button.	Dp
contextualCommandBarBackgroundBrush	Returns a brush for the background of the contextual command bar.	Brush
itemBorderRadius	Returns the border radius for the items in the contextual command bar.	Dp
groupBorderRadius	Returns the border radius for the groups in the contextual command bar.	Dp
buttonSpacing	Returns the spacing between buttons in the contextual command bar.	Dp
buttonPadding	Returns the padding values for the buttons in the contextual command bar.	Dp
buttonMinWidth	Returns the minimum width of the buttons in the contextual command bar.	Dp
groupSpacing	Returns the spacing between groups in the contextual command bar.	Dp
iconSize	Returns the size of the icons in the contextual command bar.	Dp
iconVerticalPadding	Returns the vertical padding values for the icons in the contextual command bar.	Dp
typography	Returns the text style for the contextual command bar.	TextStyle
itemIconHorizontalPadding	Returns the horizontal padding values for the icons in the items of the contextual command bar.	Dp
groupIconHorizontalPadding	Returns the horizontal padding values for the icons in the groups of the contextual command bar.	Dp
buttonBackgroundBrush	Returns a state brush for the background of the buttons in the contextual command bar.	StateBrush
iconColor	Returns a state color for the icons in the contextual command bar.	StateColor
focusStroke	Returns a list of border strokes for the focus state of the buttons in the contextual command bar.	List<BorderStroke>

Dialog

Package: com.microsoft.fluentui.tokenized.menu

Create a dialog with the given content. The dialog does not fill the screen and is normally used for modal events that require users to take an action before they can proceed.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
onDismiss	() -> Unit	Execute any instruction when user tries to close the dialog.	Yes	N/A
dialogProperties	DialogProperties	Optional modifier for dialog	No	DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false, securePolicy = SecureFlagPolicy.Inherit, usePlatformDefaultWidth = true)
modifier	Modifier	Optional modifier for dialog	No	null
dialogTokens	DialogTokens?	Optional tokens for customizing dialog's visual appearance	No	N/A
content	@Composable () -> Unit	Content to be displayed inside the dialog	Yes	N/A

Control Tokens

Token	Description	Return Type
backgroundBrush(dialogInfo: DialogInfo)	Returns a brush for the background of the dialog.	Brush
cornerRadius(dialogInfo: DialogInfo)	Returns the corner radius of the dialog.	Dp
elevation(dialogInfo: DialogInfo)	Returns the elevation of the dialog.	Dp
borderBrush(dialogInfo: DialogInfo)	Returns a brush for the border of the dialog.	Brush
borderStrokeWidth(dialogInfo: DialogInfo)	Returns the stroke width of the border of the dialog.	Dp

Drawer

Package: com.microsoft.fluentui.tokenized.drawer

Drawer block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
modifier	Modifier	Optional modifier for the drawer	No	Modifier
behaviorType	BehaviorType	Opening behaviour of drawer. Default is BOTTOM	No	BehaviorType.BOTTOM
drawerState	DrawerState	State of the drawer	No	rememberDrawerState()
scrimVisible	Boolean	Create obscures background when scrim visible set to true when the drawer is open. The default value is true	No	true
drawerTokens	DrawerTokens?	Tokens to provide appearance values. If not provided then drawer tokens will be picked from [FluentTheme]	No	null
drawerContent	@Composable () -> Unit	Composable that represents content inside the drawer	Yes	N/A
preventDismissalOnScrimClick	Boolean	when true, the drawer will not be dismissed when the scrim is clicked/ tapped	No	false
onScrimClick	() -> Unit	callback to be invoked when the scrim is clicked	No	{}

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns a brush for the background of the drawer.	Brush
handleColor	Returns the color of the handle for the drawer.	Color
elevation	Returns the elevation of the drawer.	Dp
borderRadius	Returns the border radius of the drawer.	Dp
scrimColor	Returns the color of the scrim for the drawer.	Color
scrimOpacity	Returns the opacity of the scrim for the drawer.	Float

Label

Package: com.microsoft.fluentui.tokenized.controls

A standard UI label consisting of a simple text.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Paramters
text	String	Label text	Yes	N/A
textStyle	TypographyTokens	Text styling for the text. Default [TypographyTokens.Display]	No	TypographyTokens.Display
colorStyle	ColorStyle	Color styling for the text. Default [ColorStyle.Primary]	No	ColorStyle.Primary
modifier	Modifier	Optional modifier for Label	No	Modifier
labelTokens	LabelTokens?	Option tokens for label styling	No	null

Control Tokens

Token	Description	Return Type
typography	Returns the text style for the label.	TextStyle
textColor	Returns the color of the text for the label.	Color

Menu

Package: com.microsoft.fluentui.tokenized.menu

Menu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen. Commonly a Menu will be placed in a Box with a sibling that will be used as the 'anchor'. Note that a Menu by itself will not take up any space in a layout, as the menu is displayed in a separate window, on top of other content.

onDismissRequest will be called when the menu should close - for example when there is a tap outside the menu, or when the back key is pressed.

Menu changes its positioning depending on the available space, always trying to be fully visible It will try to expand horizontally, depending on layout direction, to the end of its parent, then to the start of its parent, and then screen end-aligned. When it is screen end-aligned, sideMargin values applied to have gap from screen edge. Vertically, it will try to expand to the bottom of its parent, then from the top of its parent, then covering parent at center, and then screen top-aligned. An offset can be provided to adjust the positioning of the menu for cases when the layout bounds of its parent do not coincide with its visual bounds. Note the offset will be applied in the direction in which the menu will decide to expand.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
opened	Boolean	Whether the menu is currently open and visible to the user	Yes	N/A
onDismissRequest	() -> Unit	Called when the user requests to dismiss the menu, such as by tapping outside the menu's bounds	Yes	N/A
modifier	Modifier	Optional modifier for Menu	No	Modifier
offset	DpOffset	[DpOffset] to be added to the position of the menu	No	DpOffset(0.dp, 0.dp)
properties	PopupProperties	Tokens to provide appearance values. If not provided then menu token will be picked from [FluentTheme.controlTokens]	No	PopupProperties(focusable = true)
menuTokens	MenuTokens?	N/A	No	ColorStyle.Primary
content	@Composable () -> Unit	Composable that represents content inside the Menu	Yes	@Composable () -> Unit

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns a brush for the background of the menu.	Brush
cornerRadius	Returns the corner radius of the menu.	Dp
elevation	Returns the elevation of the menu.	Dp
bottomMargin	Returns the bottom margin of the menu.	Dp
sideMargin	Returns the side margin of the menu.	Dp

PeoplePicker

Package: com.microsoft.fluentui.tokenized.persona

API to create a customized PeoplePicker for users to add a list of PersonaChips.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for Non-Mandatory Parameters
onChipCloseClick	((PeoplePickerItemData) -> Unit)?	Callback triggered when a PersonaChip is closed.	No	null
chipValidation	(Person) -> PersonaChipStyle	Callback triggered when a PersonaChip is added, used for validation.	No	{ PersonaChipStyle.Neutral }
onTextEntered	((String) -> Unit)?	Callback triggered when the user clicks done on the keyboard.	No	null
leadingAccessoryContent	(@Composable () -> Unit)?	Content to be placed towards the start of PeoplePicker.	No	null
trailingAccessoryContent	(@Composable () -> Unit)?	Content to be placed towards the end of PeoplePicker.	No	null
label	String?	Description for the PeoplePicker.	No	null
assistiveText	String?	Assistance text for the PeoplePicker.	No	null
errorString	String?	String to describe the error. PeoplePicker goes in error mode if this is provided.	No	null
searchHint	String?	String to be shown as a hint when the PeoplePicker is in rest state.	No	null
leadingRestIcon	ImageVector?	Icon displayed when the textField is in rest state.	No	null
leadingFocusIcon	ImageVector?	Icon displayed when the textField is in focus state.	No	null
leadingIconContentDescription	String?	Content description for leading icon.	No	null
trailingAccessoryIcon	FluentIcon?	Icon displayed towards the end of textField and mainly acts as a dismiss icon.	No	FluentIcon(SearchBarIcons.Dismisscircle, contentDescription = LocalContext.current.resources.getString(R.string.fluentui_clear_text))
peoplePickerContentDescription	String?	Content description for the PeoplePicker. Add content description for accessibility description.	No	null
peoplePickerTokens	PeoplePickerTokens?	Customization options for the PeoplePicker.	No	null

Persona

Package: com.microsoft.fluentui.tokenized.persona

A customized list item. Can be a Single or multiline Avatar item. Size of the persona is based on the texts provided.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
person	Person	person details like avatar	Yes	N/A
modifier	Modifier	Optional modifier for List item.	No	ModifieR
primaryText	String	Primary text.	Yes	N/A
secondaryText	String?	Optional secondaryText or a subtitle.	No	null
tertiaryText	String?	Optional tertiary text or a footer.	No	null
onClick	(() -> Unit)?	Optional onClick action for list item.	No	null
border	BorderType	Optional border for the list item.	No	NoBorder
borderInset	BorderInset	Optional borderInset for list item.	No	None
enabled	Boolean	Optional enable/disable List item	No	true
enableAvatarActivityRings	Boolean	if avatar activity rings are enabled/disabled	No	false
enableAvatarPresence	Boolean	if avatar presence is enabled/disabled	No	true
avatarTokens	AvatarTokens?	tokens for the avatar in [Person]	No	null
personaTokens	ListItemTokens?	tokens for the persona	No	null

Control Tokens

Avatar Tokens

Token	Description	Return Type
avatarStyle	Returns style	AvatarStyle
fontTypography	Returns typography	TextStyle
avatarSize	Returns size	Dp
icon	Returns icon	ImageVector
foregroundColor	Returns foreground color	Color
backgroundBrush	Returns background brush	Brush
presenceIcon	Returns presence icon	FluentIcon
presenceOffset	Returns presence offset	DpOffset
cornerRadius	Returns corner radius	Dp
borderStroke	Returns border stroke	List<BorderStroke>
cutoutCornerRadius	Returns cutout corner radius	Dp
cutoutBackgroundColor	Returns cutout background color	Color
cutoutBorderColor	Returns cutout border color	Color
cutoutIconSize	Returns cutout icon size	Dp

List Item Tokens

Token	Description	Return Type
backgroundBrush	Returns a state brush for the background of the list item.	StateBrush
borderColor	Returns a state color for the border of the list item.	StateColor
iconColor	Returns a state color for the icon in the list item.	StateColor
cellHeight	Returns the height of the list item.	Dp
unreadDotColor	Returns the color of the unread dot in the list item.	Color
padding	Returns the padding values for the list item.	PaddingValues
borderSize	Returns the size of the border for the list item.	Dp
chevronTint	Returns the tint color for the chevron in the list item.	Color
borderInset	Returns the inset of the border for the list item.	Dp

Persona Chip

Package: com.microsoft.fluentui.tokenized.persona

[PersonaChip] is a compact representations of entities(most commonly, people)that can be types in, deleted or dragged easily.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
person	Person	Person data for the persona chip	Yes	N/A
modifier	Modifier	Modifier for the persona chip	No	Modifier
style	PersonaChipStyle	Optional persona chip style. See [PersonaChipStyle]	No	PersonaChipStyle.Neutral
size	PersonaChipSize	Option persona chip size. See [PersonaChipSize]	No	Medium
enabled	Boolean	Whether persona chip is enabled or disabled. Enabled by default.	No	true
selected	Boolean	Whether persona chip is selected or unselected. Unselected by default.	No	false
onClick	(() -> Unit)?	onClick action for persona chip	No	null
onCloseClick	(() -> Unit)?	onClick action for close button. This action is performed after the chip is selected and on the close icon	No	null
interactionSource	MutableInteractionSource	Optional interactionSource	No	remember { MutableInteractionSource() }
personaChipTokens	PersonaChipTokens?	Optional tokens for persona chip	No	null

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the brush used for the background of a PersonaChip control.	StateBrush
textColor	Returns the color used for the text of a PersonaChip control.	StateColor
cornerRadius	Returns the corner radius used for a PersonaChip control.	Dp
typography	Returns the text style used for the text of a PersonaChip control.	TextStyle
verticalPadding	Returns the vertical padding used for a PersonaChip control.	Dp
horizontalPadding	Returns the horizontal padding used for a PersonaChip control.	Dp
avatarToTextSpacing	Returns the spacing between the avatar and the text of a PersonaChip control.	Dp
avatarSize	Returns the size of the avatar used in a PersonaChip control.	AvatarSize

Persona List

Package: com.microsoft.fluentui.tokenized.persona

A customized list of personas. Can be a Single or multiline Persona.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
personas	List<Persona>	List of [Persona]	Yes	N/A
modifier	Modifier	Optional modifier for List item.	No	Modifier
border	BorderType	[BorderType] Optional border for the list item.	No	NoBorder
borderInset	BorderInset	[BorderInset]Optional borderInset for list item.	No	null
enableAvatarActivityRings	Boolean	if avatar activity rings are enabled/disabled	No	false
enableAvatarPresence	Boolean	if avatar presence is enabled/disabled	No	true
textAccessibilityProperties	(SemanticsPropertyReceiver.() -> Unit)?	Accessibility properties for the text in list item.	No	null
avatarTokens	AvatarTokens?	tokens for the avatar in [Person]	No	null
personaListTokens	ListItemTokens?	tokens for the persona list	No	null

Control Tokens

Avatar Tokens

Token	Description	Return Type
avatarStyle	Returns style	AvatarStyle
fontTypography	Returns typography	TextStyle
avatarSize	Returns size	Dp
icon	Returns icon	ImageVector
foregroundColor	Returns foreground color	Color
backgroundBrush	Returns background brush	Brush
presenceIcon	Returns presence icon	FluentIcon
presenceOffset	Returns presence offset	DpOffset
cornerRadius	Returns corner radius	Dp
borderStroke	Returns border stroke	List<BorderStroke>
cutoutCornerRadius	Returns cutout corner radius	Dp
cutoutBackgroundColor	Returns cutout background color	Color
cutoutBorderColor	Returns cutout border color	Color
cutoutIconSize	Returns cutout icon size	Dp

List Item Tokens

Token	Description	Return Type
backgroundBrush	Returns a state brush for the background of the list item.	StateBrush
borderColor	Returns a state color for the border of the list item.	StateColor
iconColor	Returns a state color for the icon in the list item.	StateColor
cellHeight	Returns the height of the list item.	Dp
unreadDotColor	Returns the color of the unread dot in the list item.	Color
padding	Returns the padding values for the list item.	PaddingValues
borderSize	Returns the size of the border for the list item.	Dp
chevronTint	Returns the tint color for the chevron in the list item.	Color
borderInset	Returns the inset of the border for the list item.	Dp

Progress Indicator

Package: com.microsoft.fluentui.tokenized.progress\

Linear Progress Indicator

Create a Determinate Linear Progress Indicator

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
progress	Float	Progress of the progress indicator. 0.0 represents no progress and 1.0 represents full progress.	Yes	N/A
linearProgressIndicatorHeight	LinearProgressIndicatorHeight	Optional width of the progress indicator	No	LinearProgressIndicatorHeight.XXXSmall
modifier	Modifier	Modifier for linear progress indicator	No	Modifier
linearProgressIndicatorTokens	LinearProgressIndicatorTokens?	Token values for linear progress indicator	No	null

Control Tokens

Token	Description	Return Type
strokeWidth	Returns the stroke width used for a LinearProgressIndicator control.	Dp
backgroundColor	Returns the background color used for a LinearProgressIndicator control.	Color
color	Returns the color used for the progress indicator of a LinearProgressIndicator control.	Color

Circular Progress Indicator

Create a Determinate Circular Progress Indicator

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
progress	Float	Progress of the progress indicator. 0.0 represents no progress and 1.0 represents full progress.	Yes	N/A
size	CircularProgressIndicatorSize	Optional size of the circular progress indicator	No	CircularProgressIndicatorHeight.XXXSmall
modifier	Modifier	Modifier for circular progress indicator	No	Modifier
style	FluentStyle	Style of progress indicator. Default: [FluentStyle.Neutral]	No	FluentStyle.Neutral
circularProgressIndicatorTokens	CircularProgressIndicatorTokens?	Token values for circular progress indicator	No	null

Control Tokens

Token	Description	Return Type
size	Returns the size used for a CircularProgressIndicator control.	Dp
strokeWidth	Returns the stroke width used for a CircularProgressIndicator control.	Dp
brush	Returns the brush used for the progress indicator of a CircularProgressIndicator control.	Brush

Scaffold

Package: com.microsoft.fluentui.tokenized.compose

Scaffold implements the basic visual layout structure. This component provides API to put together several compose components to construct your screen, by ensuring proper layout strategy for them and collecting necessary data so these components will work together correctly.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
modifier	Modifier	The [Modifier] to be applied to this scaffold	No	Modifier
topBar	@Composable () -> Unit	Top app bar of the screen, typically a [SmallTopAppBar]	No	{}
bottomBar	@Composable () -> Unit	Bottom bar of the screen, typically a [NavigationBar]	No	{}
snackbar	@Composable () -> Unit	Component to host [Snackbar]s that are pushed to be shown.	No	{}
floatingActionButton	FabPosition	Main action button of the screen, typically a [FloatingActionButton]	No	FabPosition.End
contentWindowInsets	WindowInsets	Window insets to be passed to [content] slot via [PaddingValues] params. Scaffold will take the insets into account from the top/bottom only if the [topBar]/[bottomBar] are not present, as the scaffold expect [topBar]/[bottomBar] to handle insets instead.	No	WindowInsets.systemBars
content	@Composable (PaddingValues) -> Unit	The content of the scaffold	Yes	N/A

Search Bar

Package: com.microsoft.fluentui.tokenized.tokenized

API to create a searchbar. This control takes input from user's keyboard and runs it against a lambda function provided by user to generate results. It allows user to select a person and display in the form of a persona chip.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
onValueChange	(String, Person?) -> Unit	Lambda function against which the input text is run.	Yes	N/A
modifier	Modifier	Optional modifier for Searchbar.	No	Modifier
enabled	Boolean	Boolean to enable/disable the CTAs on Searchbar.	No	true
style	FluentStyle	Color Scheme to be applied to Searchbar.	No	FluentStyle.Neutral
keyboardOptions	KeyboardOptions	Keyboard Configuration Options for Input Text Field.	No	KeyboardOptions
keyboardActions	KeyboardActions	Configures keyboards response w.r.t. user interactions.	No	KeyboardActions
searchHint	String	String provided as hint on SearchBar.	No	Search
focusByDefault	Boolean	Boolean which allows Searchbar to be initially composed in focused state.	No	false
loading	Boolean	Boolean to display progress indicator on SearchBar.	No	false
selectedPerson	Person?	Person object which has to be displayed as a Persona Chip.	No	null
personaChipOnClick	(() -> Unit)?	OnClick Behaviour for above persona chip.	No	null
microphoneCallback	(() -> Unit)?	Callback to be provided to microphone icon, available at right side.	No	null
navigationIconCallback	(() -> Unit)?	Callback to be provided to navigation icon, present at left side.	No	null
rightAccessoryIcon	FluentIcon?	[FluentIcon] Object which is displayed on the right side of microphone.	No	null
leftAccessoryIcon	FluentIcon?	[FluentIcon] Object which is displayed on the left side of Searchbar.	No	SearchBarIcons.Search
searchBarTokens	SearchBarTokens?	Tokens which help in customizing appearance of search bar.	No	null

Control Tokens

Token	Description	Return Type
inputBackgroundBrush	Returns the brush used for the background of the input field in a SearchBar control.	Brush
backgroundBrush	Returns the brush used for the background of a SearchBar control.	Brush
textColor	Returns the color used for the text in a SearchBar control.	Color
leftIconColor	Returns the color used for the left icon in a SearchBar control.	Color
cursorColor	Returns the brush used for the cursor in a SearchBar control.	Brush
rightIconColor	Returns the color used for the right icon in a SearchBar control.	Color
typography	Returns the text style used for the text in a SearchBar control.	TextStyle
leftIconSize	Returns the size used for the left icon in a SearchBar control.	Dp
rightIconSize	Returns the size used for the right icon in a SearchBar control.	Dp
circularProgressIndicatorSize	Returns the size used for the progress indicator in a SearchBar control.	CircularProgressIndicatorSize
searchBarPadding	Returns the padding used for a SearchBar control.	PaddingValues
height	Returns the height used for a SearchBar control.	Dp
cornerRadius	Returns the corner radius used for a SearchBar control.	Dp
elevation	Returns the elevation used for a SearchBar control.	Dp
borderWidth	Returns the border width used for a SearchBar control.	Dp
borderColor	Returns the border color used for a SearchBar control.	Color
borderWidth	Returns the shadow color used for a SearchBar control.	Color

Segmented Control

Package: com.microsoft.fluentui.tokenized.demos\

Pill Button

API to create Pill shaped Button which will further be used in tabs and bars.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
pillMetaData	PillMetaData	Metadata for a single pill.	Yes	N/A
modifier	Modifier	Optional Modifier to customize the design and behaviour of pill button.	No	Modifier
style	FluentStyle	Color Scheme of pill shaped button.	No	FluentStyle.Neutral
interactionSource	MutableInteractionSource	Interaction Source Object to handle gestures.	No	remember { MutableInteractionSource() }
pillButtonTokens	PillButtonTokens?	Tokens to customize the design of pill button.	No	null

Control Tokens

Token	Description	Return Type
minHeight	Returns the minimum height used for a PillButton control.	Dp
verticalPadding	Returns the vertical padding used for a PillButton control.	Dp
iconSize	Returns the size used for the icon in a PillButton control.	Dp
backgroundBrush	Returns the brush used for the background of a PillButton control.	StateBrush
iconColor	Returns the color used for the icon in a PillButton control.	StateColor
textColor	Returns the color used for the text in a PillButton control.	StateColor
typography	Returns the text style used for the text in a PillButton control.	TextStyle
focusStroke	Returns the border stroke used for the focus state of a PillButton control.	List<BorderStroke>
notificationDotColor	Returns the color used for the notification dot in a PillButton control.	StateColor

Pill Bar

PI to create Bar of Pill button. The PillBar control is a linear set of two or more PillButton, each of which functions as a mutually exclusive button. PillBar are commonly used as filter for search results.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
metadataList	MutableList	-	Yes	N/A
modifier	Modifier	-	No	Modifier
style	FluentStyle	-	No	FluentStyle.Neutral
showBackground	Boolean	-	No	false
pillButtonTokens	PillButtonTokens?	-	No	null
pillBarTokens	PillBarTokens?	-	No	null

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the brush used for the background of a PillBar control.	Brush

Pill tabs

API to create PillTabs. The PillTabs control is a linear set of two or more PillButton, each of which functions as a mutually exclusive button. Within the control, all PillButton are equal in width. PillTabs are often used to display different views.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
metadataList	MutableList	List of [PillMetaData] which contains information for all buttons in Tab.	Yes	N/A
modifier	Modifier	Optional Modifier for PillTabs.	No	Modifier
selectedIndex	Int	Index of the PillButton to be selected.	No	0
scrollable	Boolean	Boolean to make Tab scrollable. Only used if more than 4 items in [metadataList]. PillTabs start working as PillBar in case conditions meet.	No	false
style	FluentStyle	Style of PillTabs and inherent PillButtons.	No	FluentStyle.Neutral
pillButtonTokens	PillButtonTokens?	Tokens to provide appearance value to PillButton.	No	null
tabsTokens	PillTabsTokens?	Tokens to provide appearance value to PillTabs.	No	null

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the brush used for the background of a PillTabs control.	Brush
trackBackgroundBrush	Returns the brush used for the background of the track in a PillTabs control.	Brush

Pill Switch

API to create PillSwitches. The PillSwitch control is a linear set of two or more PillButton, each of which functions as a mutually exclusive button. PillSwitches are used to toggling between two views.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
metadataList	MutableList	List of [PillMetaData] which contains information for all buttons in Tab.	Yes	N/A
modifier	Modifier	Optional Modifier for Tabs.	No	Modifier
selectedIndex	Int	Index of the PillButton to be selected.	No	0
style	FluentStyle	Style of Tabs and inherent PillButtons.	No	FluentStyle.Neutral
pillButtonTokens	PillButtonTokens?	Tokens to provide appearance value to PillButton.	No	null
pillSwitchTokens	PillSwitchTokens?	Tokens to provide appearance value to PillSwitch.	No	null

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the brush used for the background of a PillSwitch control.	Brush

Shimmer

Package: com.microsoft.fluentui.tokenized.shimmer

Create a Shimmer effect

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
modifier	Modifier	Modifier for shimmer.	No	Modifier
shape	ShimmerShape	Shape of the shimmer. See [ShimmerShape] for shapes.	No	ShimmerShape.Box
shimmerTokens	ShimmerTokens?	Token values for shimmer.	No	null
content	@Composable () -> Unit	Content to be shimmered	No	N/A

Control Tokens

Token	Description	Return Type
cornerRadius	Returns the corner radius used for a Shimmer control.	Dp
knockoutEffectColor	Returns the color used for the knockout effect in a Shimmer control.	Color
color	Returns the color used for the shimmer effect in a Shimmer control.	Color

SideRail

Package: com.microsoft.fluentui.tokenized.navigation

Side rails provide access to multiple destinations in your app. Used mainly in tablets and wide-screen devices.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for Non-Mandatory Parameters
topTabDataList	List	List of [TabData] to create top tabs.	Yes	N/A
modifier	Modifier	[Modifier] to be applied to this item.	No	Modifier
topTabSelectedIndex	Int	Index of the selected top tab.	No	0
bottomTabSelectedIndex	Int	Index of the selected bottom tab.	No	-1
header	@Composable (() -> Unit)?	[Composable] to provide a header view.	No	null
showIconText	Boolean	Whether to show text under icons in top and bottom tabs.	No	false
bottomTabDataList	List?	List of [TabData] to create bottom tabs.	No	null
tabItemTokens	TabItemTokens?	[TabItemTokens] to apply on tabs.	No	null
sideRailTokens	SideRailTokens?	Provide appearance values. If not provided, then tokens will be picked from AppThemeController.	No	null

Control Tokens

Token	Description	Return Type
borderColor	Color of the border	'Color`
topMargin	Returns the color of the top border of the SideRail	Dp
bottomMargin	Returns the value of bottom margin of the SideRail	Dp
borderWidth	Returns the value of width of the border	Dp
headerPadding	Returns padding values	PaddingValues

Snackbar

Package: com.microsoft.fluentui.tokenized.notification

Snackbar are transient Notification control used to deliver information which can be timedout or

• can be cleared by user pressing the CTA or dismiss icon. Snackbar is rendered using [SnackbarMetadata] which saves all the information about it. Snackbar shows one message at a time and uses a [SnackbarState] to save all the requests. Multiple styles of Snackbar are supported using [SnackbarStyle].

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
snackbarState	SnackbarState	Queue to store all the Notification requests.	Yes	N/A
modifier	Modifier	Optional modifier to be applied to Snackbar.	No	Modifier
snackbarTokens	SnackBarTokens?	Optional Tokens to redesign Snackbar.	No	null

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the brush used for the background of a SnackBar control.	Brush
iconColor	Returns the color used for the icon in a SnackBar control.	Color
titleTypography	Returns the text style used for the title in a SnackBar control.	TextStyle
subtitleTypography	Returns the text style used for the subtitle in a SnackBar control.	TextStyle
leftIconSize	Returns the size used for the left icon in a SnackBar control.	Dp
dismissIconSize	Returns the size used for the dismiss icon in a SnackBar control.	Dp

Tab Bar

Package: com.microsoft.fluentui.tokenized.navigation

TabBar displays tabs that are arranged horizontally.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
tabDataList	List	Provide list of [TabData] to create tabs.	Yes	N/A
modifier	Modifier	The [Modifier] to be applied to this item.	No	Modifier
selectedIndex	Int	Index of selected tab. This should be updated onClick of TabData & provide back to TabBar.	No	0
tabTextAlignment	TabTextAlignment	Placement of text in Tab.	No	TabTextAlignment.VERTICAL
tabItemTokens	TabItemTokens?	[TabItemTokens] to apply on tabs.	No	null
tabBarTokens	TabBarTokens?	Provide appearance values. If not provided then tokens will be picked from AppThemeController.	No	null

Control Tokens

Token	Description	Return Type
topBorderColor	Returns the color of the top border of the tab bar.	Color
topBorderWidth	Returns the width of the top border of the tab bar.	Dp

Text Field

Package: com.microsoft.fluentui.tokenized.controls

API to create a customized TextField for users to edit text via software and hardware keyboard which has support for label, assistive text, error strings. Whenever the user edits the text, onValueChange is called with the most up to date string with which developer is expected to update their state. It is crucial that the value provided in the onValueChange is fed back into BasicTextField in order to have the final state of the text being displayed.

Params

Parameters	Type	Description	Is Parameter Mandatory	Default value for Non-Mandatory Parameters
value	String	Input String text to be shown in TextField.	Yes	N/A
onValueChange	((String) -> Unit)	The callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback.	Yes	N/A
modifier	Modifier	Optional modifier for the TextField.	No	Modifier
readOnly	Boolean	Boolean to indicate if the TextField is editable or not.	No	false
enabled	Boolean	Boolean to indicate if the TextField is enabled or not.	No	true
hintText	String?	Hint to be shown on TextField. Displayed when [value] is empty and TextField doesn't have focus.	No	null
label	String?	String which acts as a description for the TextField.	No	null
assistiveText	String?	String which assists users with the TextField.	No	null
trailingAccessoryText	String?	String to be placed towards the end of TextField as secondary text.	No	null
errorString	String?	String to describe the error. TextField goes in error mode if this is provided.	No	null
leadingRestIcon	ImageVector?	Icon which is displayed when the textField is in rest state.	No	null
leadingFocusIcon	ImageVector?	Icon which is displayed when the textField is in focus state.	No	null
leadingIconContentDescription	String?	String which acts as content description for leading icon.	No	null
trailingAccessoryIcon	FluentIcon?	Icon which is displayed towards the end of textField and mainly acts as dismiss icon.	No	FluentIcon(SearchBarIcons.Dismisscircle, contentDescription = LocalContext.current.resources.getString(R.string.fluentui_clear_text))
keyboardOptions	KeyboardOptions	Software keyboard options that contains configuration such as [KeyboardType] and [ImeAction].	No	KeyboardOptions()
keyboardActions	KeyboardActions	When the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in [KeyboardOptions.imeAction].	No	KeyboardActions()
visualTransformation	VisualTransformation	The visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.	No	VisualTransformation.None
textFieldContentDescription	String?	custom content description for accessibility purposes	No	null
decorationBox	@Composable ((@Composable () -> Unit) -> Unit)?	composable lambda that allows you to add decorations around a text field	No	null
textFieldTokens	TextFieldTokens?	Optional Tokens to customize appearance of TextField

Control Tokens

Token	Description	Return Type
backgroundBrush	Returns the brush used for the background of the text field.	Brush
leadingIconColor	Returns the color of the leading icon in the text field.	Color
cursorColor	Returns the brush used for the cursor in the text field.	Brush
dividerColor	Returns the brush used for the divider in the text field.	Brush
labelColor	Returns the color of the label in the text field.	Color
labelTypography	Returns the typography of the label in the text field.	TextStyle
assistiveTextColor	Returns the color of the assistive text in the text field.	Color
assistiveTextTypography	Returns the typography of the assistive text in the text field.	TextStyle
hintColor	Returns the color of the hint text in the text field.	Color
hintTextTypography	Returns the typography of the hint text in the text field.	TextStyle
inputTextColor	Returns the color of the input text in the text field.	Color
inputTextTypography	Returns the typography of the input text in the text field.	TextStyle
trailingAccessoryTextColor	Returns the color of the trailing accessory text in the text field.	Color
trailingAccessoryTextTypography	Returns the typography of the trailing accessory text in the text field.	TextStyle
leftRightPadding	Returns the padding values for the left and right sides of the text field.	PaddingValues
labelPadding	Returns the padding values for the label in the text field.	PaddingValues
assistiveTextPadding	Returns the padding values for the assistive text in the text field.	PaddingValues
leadingIconSize	Returns the size of the leading icon in the text field.	Dp
trailingIconSize	Returns the size of the trailing icon in the text field.	Dp
strokeWidth	Returns the stroke width used for the text field.	Dp

ToolTip

Package: com.microsoft.fluentui.tokenized.notification

ToolTipBox is a composable that shows a tooltipContent anchored to its content.

Params

Parameter	Type	Description	Is Parameter Mandatory	Default Value for Non-Mandatory Parameters
tooltipContent	@Composable () -> Unit	The content of the tooltip box.	Yes	N/A
tooltipState	TooltipState	The state of the tooltip box.	Yes	N/A
modifier	Modifier	The modifier to be applied to the tooltip box.	No	Modifier
focusable	Boolean	Whether the tooltip box is focusable.	No	true
offset	DpOffset	The offset of the tooltip box.	No	DpOffset(0.dp, 0.dp)
onDismissRequest	(() -> Unit)?	The callback to be invoked when the tooltip box is dismissed.	No	null
tooltipTokens	TooltipTokens?	The tooltip tokens that are used to customize the tooltip box.	No	null
content	@Composable () -> Unit	The content of the tooltip box.	Yes	N/A

Control Tokens

Token	Description of the Function	Return Type
backgroundBrush	Provides the background brush for the tooltip.	Brush
tipColor	Provides the color for the tooltip tip.	Color
textColor	Provides the text color for the tooltip.	Color
textTypography	Provides the text typography for the tooltip.	TextStyle
titleColor	Provides the title color for the tooltip.	Color
spacingTitleText	Provides the spacing between title and text in the tooltip.	Dp
titleTypography	Provides the title typography for the tooltip.	TextStyle
cornerRadius	Provides the corner radius for the tooltip.	Dp
padding	Provides the padding values for the tooltip.	PaddingValues
elevation	Provides the elevation for the tooltip.	Dp
margin	Provides the margin from screen edge for the tooltip.	Dp
maxWidth	Provides the maximum width for the tooltip.	Dp