Action footer component

Summary

An action footer is a footer bar that contains commonly used actions in the form of pre-arranged buttons and hyperlinks. It can be used in multiple UI components, such as modal dialog, split views, popovers and cards.

Expected behavior

Should be able to give the component buttons/hyperlinks and specify their layout. If no action is passed in, render empty footer with 10px height

Responsiveness

On large screen size action items are horizontally positioned, while on small size they are stacked

React Props

Prop	Type	Default	Description
start	node		actions to be displayed at the start side
center	node		actions to be displayed in the center
end	node		actions to be displayed at the end side

Themeable styles

background-color border-top

Example

<ActionFooter
  start={<Button text='cancel'/>}
  end={<div><Button text='save'/> <Button text='next'/></div>}
/>

<ActionFooter center={<a href='google.com'/>} />

[zhongyn]

@dm123455 using start/end is within the consideration of bidi. Most of our style names and components are following this convention, such as arrange, slidepanel, dynamic-grid

[zhongyn]

talked with UX/Brett in UX sync, the content passed in the footer will take care of the spacing between buttons itself and action footer is unopinionated on it