Button Toolbar

This kit should primarily hold the most commonly used buttons.

Default

Code Example

import React from 'react'
import { Button, ButtonToolbar } from '../..'

const ButtonToolbarDefault = (props) => (
  <div className="pb--doc-demo-row">
    <ButtonToolbar
        orientation="vertical"
        {...props}
    >
      <Button
          text="Create"
          {...props}
      />
      <Button
          text="Edit"
          {...props}
      />
      <Button
          text="Copy"
          {...props}
      />
      <Button
          text="Cut"
          {...props}
      />
    </ButtonToolbar>

    <ButtonToolbar
        orientation="horizontal"
        {...props}
    >
      <Button
          text="Create"
          {...props}
      />
      <Button
          text="Edit"
          {...props}
      />
      <Button
          text="Copy"
          {...props}
      />
      <Button
          text="Cut"
          {...props}
      />
    </ButtonToolbar>
  </div>
)

export default ButtonToolbarDefault

Secondary

Code Example

import React from 'react'
import { Button, ButtonToolbar } from '../..'

const ButtonToolbarSecondary = (props) => (
  <div className="pb--doc-demo-row">
    <ButtonToolbar
        orientation="vertical"
        variant="secondary"
        {...props}
    >
      <Button
          text="Create"
          variant="secondary"
          {...props}
      />
      <Button
          text="Edit"
          variant="secondary"
          {...props}
      />
      <Button
          text="Copy"
          variant="secondary"
          {...props}
      />
      <Button
          text="Cut"
          variant="secondary"
          {...props}
      />
    </ButtonToolbar>

    <ButtonToolbar
        orientation="horizontal"
        variant="secondary"
        {...props}
    >
      <Button
          text="Create"
          variant="secondary"
          {...props}
      />
      <Button
          text="Edit"
          variant="secondary"
          {...props}
      />
      <Button
          text="Copy"
          variant="secondary"
          {...props}
      />
      <Button
          text="Cut"
          variant="secondary"
          {...props}
      />
    </ButtonToolbar>
  </div>
)

export default ButtonToolbarSecondary