Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Examples
  2. Sizes
  3. Prop Table

ButtonGroup

import { ButtonGroup } from '@duik/it'
import ButtonGroup from '@duik/button-group'

Group buttons horizontaly or verticaly.

Examples

<ButtonGroup>
  <Button>
    Select Action
  </Button>
  <Button square>
    <Icon>
      pen_edit
    </Icon>
  </Button>
</ButtonGroup>
ReactHTML Snippet
<ButtonGroup>
  <Button primary>
    1st Pill
  </Button>
  <Button primary>
    2nd pill
  </Button>
  <Button primary>
    3rd pill
  </Button>
</ButtonGroup>
ReactHTML Snippet
<ButtonGroup vertical>
  <Button primary>
    1st Pill
  </Button>
  <Button primary>
    2nd pill
  </Button>
  <Button primary>
    3rd pill
  </Button>
</ButtonGroup>
ReactHTML Snippet

Sizes & Shapes

<ButtonGroup sm>
  <Button>
    Small Buttons
  </Button>
  <Button square>
    <Icon>
      pen_edit
    </Icon>
  </Button>
</ButtonGroup>
ReactHTML Snippet
<ButtonGroup>
  <Button>
    Regular
  </Button>
  <Button square>
    <Icon>
      pen_edit
    </Icon>
  </Button>
</ButtonGroup>
ReactHTML Snippet
<ButtonGroup lg>
  <Button>
    Large Sized Buttons
  </Button>
  <Dropdown
    buttonProps={{
      square: true
    }}
    buttonText={<Icon>pen_edit</Icon>}
    menuPosition="bottom-left"
  >
    <DropdownItem>
      <Icon mr>
        pen_edit
      </Icon>
      Something here
    </DropdownItem>
  </Dropdown>
</ButtonGroup>
ReactHTML Snippet

Prop table

children

false

type: React.ReactNode
className

false

type: string
className, e.g. "my-custom-styling"
vertical

false

type: boolean
Renders buttons vertically
sm

false

type: boolean
Renders smaller button with height 30px
lg

false

type: boolean
Renders larger button with height 50px
...rest

false

type: any
Other properties are passed down to the wrapping element