Bifrost Design System

Design React CSS

Figma

import BottomBar from "@intility/bifrost-react/BottomBar";

BottomBar

Go to top

Props

Floating bottom bar

Fixed positioning (will float on top of other content)
Responsive vertical padding like .bf-page-padding (remove all padding with noPadding prop)
Automatically makes space for sidebar/collapsed sidebar/no sidebar with transition
Height will adjust to its content

Main content overlap

Since the BottomBar will float on top of other content, you need to make sure to make vertical space for it at the bottom of your content, usually a padding-bottom: [your BottomBar height] on your main content will do the trick.

Inline layout

Also see <Inline> for an easy way to place buttons and other inline content.

Some text