Moxi Design System

# Floating Toolbars

The mx-floating-toolbar component is a floating toolbar for one to three action buttons. The toolbar is fixed to the bottom of the viewport. It is intended for use on smaller screens. The component itself does not inherently change visibility based on any breakpoints, so that is left up to the host application.

Search Filters Submit
Search Filters
Submit Event
<mx-floating-toolbar>
  <mx-button icon="mds-search">Search</mx-button>
  <mx-button icon="ph-bold ph-sliders">Filters</mx-button>
  <mx-button icon="ph-bold ph-plus">Submit</mx-button>
</mx-floating-toolbar>
1
2
3
4
<mx-floating-toolbar>
  <mx-button icon="mds-search">Search</mx-button>
  <mx-button icon="ph-bold ph-sliders">Filters</mx-button>
</mx-floating-toolbar>
1
2
3
<mx-floating-toolbar>
  <mx-button icon="ph-bold ph-plus">Submit Event</mx-button>
</mx-floating-toolbar>
1
2

# mx-floating-toolbar

# Properties

Property Attribute Description Type Default
portal portal Set to true to move the toolbar to a root level "portal" container (to break out of any stacking contexts). boolean false

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Icons →