Package Exports

@workday/canvas-kit-react-action-bar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@workday/canvas-kit-react-action-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Canvas Kit Action Bar

Full width toolbar fixed to bottom of screen.

Although not required, buttons are often used in in action bars. The primary action button should be left aligned followed by secondary buttons. The primary button is on the right only in task orchestration and on mobile devices.

Installation

yarn add @workday/canvas-kit-react

yarn add @workday/canvas-kit-react-action-bar

Usage

import * as React from 'react';
import {Button} from '@workday/canvas-kit-react-button';
import {ActionBar} from '@workday/canvas-kit-react-action-bar';

<ActionBar>
  <Button variant={ButtonVariant.Primary}>Button</Button>
  <Button>Button</Button>
  <Button>Button</Button>
</ActionBar>;

Static Properties

None

Component Props

Required

None

Optional

`fixed: boolean`

Fixes the toolbar to the bottom of the window (uses position: fixed)

Responsive Behavior

At 575px, responsive styles will take effect:

Applies a flex box to the buttons
Makes single-button groups full width
All buttons will become the same width (flex: 1).
Button order will become reversed, making left-aligned primary buttons right-aligned.

When on a mobile form factor, the button placement should flip to have the primary button on the far right.