Button Placement

Usage Patterns

Anchored Buttons

When content is taller than a viewport, it is recommended that buttons be anchored to the bottom of a screen to prevent them from being hidden below the scroll. For examples, see Anchored Buttons on the Buttons & Button Groups page.

Primary Action and Cancel Buttons

Live Editor

<Container> <div className="row flex-column flex-sm-row-reverse"> <Button color="primary" className="m-2">Primary Action</Button> <Button variant="textonly" className="m-2">Cancel</Button> </div> </Container>

<Container>
  <div className="row flex-column flex-sm-row-reverse">
    <Button color="primary" className="m-2">Primary Action</Button>
    <Button variant="textonly" className="m-2">Cancel</Button>
  </div>
</Container>

Result

Loading...

Next and Back Buttons

Live Editor

<Container> <div className="row flex-row-reverse"> <Button color="primary" className="m-2 w-25"> Next <i className="btn-icon__right icon prism-icon-chevron-right"></i> </Button> <Button variant="outline" className="m-2 w-25"> <i className="btn-icon__left icon prism-icon-chevron-left"></i> Back </Button> </div> </Container>

<Container>
  <div className="row flex-row-reverse">
    <Button color="primary" className="m-2 w-25">
      Next
      <i className="btn-icon__right  icon prism-icon-chevron-right"></i>
    </Button>
    <Button variant="outline" className="m-2 w-25">
      <i className="btn-icon__left  icon prism-icon-chevron-left"></i>
      Back
    </Button>
  </div>
</Container>

Result

Loading...

Next, Back and Auxiliary Buttons

Live Editor

<Container> <div className="row justify-content-between flex-row-reverse"> <div className="row flex-row-reverse"> <Button color="primary" className="m-2"> Next <i className="btn-icon__right icon prism-icon-chevron-right"></i> </Button> <Button variant="outline" className="m-2"> <i className="btn-icon__left icon prism-icon-chevron-left"></i> Back </Button> </div> <Button variant="textonly" className="m-2">Cancel</Button> </div> </Container>

<Container>
  <div className="row justify-content-between flex-row-reverse">
    <div className="row flex-row-reverse">
      <Button color="primary" className="m-2">
        Next
        <i className="btn-icon__right  icon prism-icon-chevron-right"></i>
      </Button>
      <Button variant="outline" className="m-2">
        <i className="btn-icon__left  icon prism-icon-chevron-left"></i>
        Back
      </Button>
    </div>
    <Button  variant="textonly" className="m-2">Cancel</Button>
  </div>
</Container>

Result

Loading...