Action Toolbar

Action Toolbar is a layout component used to display contextual actions for selected items. It provides a consistent way to present action buttons in response to user selections, typically showing the number of selected items and available operations.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Storybook

React guidance

Source

GitHub code

Example


                                                        
                                                        
                                                            import { ActionToolbar, ActionToolbarButton, BreakpointRangeWithFallback, getBreakpointRangeValueFallback, isAtLeastTablet } from  '../index';
                                                        
                                                        const breakpointRange = useBreakpointRange<BreakpointRangeWithFallback>();
                                                        const isCompact = !isAtLeastTablet(getBreakpointRangeValueFallback(breakpointRange));
                                                        
                                                        <ActionToolbar
                                                            variant="floating"
                                                            disabled={disabled}
                                                            leftSide={disabled ? '0 items selected' : '2 items selected'}
                                                            rightSide={
                                                                <>
                                                                    <ActionToolbarButton disabled={disabled} icon={IconName.Edit} accessibleText="Edit">
                                                                        {!isCompact && 'Edit'}
                                                                    </ActionToolbarButton>
                                                                    <ActionToolbarButton disabled={disabled} icon={IconName.Delete} accessibleText="Delete">
                                                                        {!isCompact && 'Delete'}
                                                                    </ActionToolbarButton>
                                                                </>
                                                            }
                                                        />;