import React from 'react'

import { IconButton } from 'playbook-ui'

const IconButtonDefault = (props) => (
  <div>
    <IconButton
    />
    <IconButton
        marginTop="md"
        variant="link"
    />
  </div>
)

export default IconButtonDefault

import React from 'react'

import { IconButton, Flex } from 'playbook-ui'

const IconButtonSizes = (props) => (
  <div>
    <Flex align="center">
      <IconButton
          size="lg"
      />
      <span>Large</span>
    </Flex>
    <Flex align="center">
      <IconButton
          size="sm"
      />
      <span>Small</span>
    </Flex>
    <Flex align="center">
      <IconButton
          size="xs"
      />
      <span>XSmall</span>
    </Flex>
    <Flex
        align="center"
        marginTop="md"
    >
      <IconButton
          size="1x"
      />
      <span>1x</span>
    </Flex>
    <Flex align="center">
      <IconButton
          size="2x"
      />
      <span>2x</span>
    </Flex>
    <Flex align="center">
      <IconButton
          size="3x"
      />
      <span>3x</span>
    </Flex>
    <Flex align="center">
      <IconButton
          size="4x"
      />
      <span>4x</span>
    </Flex>
  </div>
)

export default IconButtonSizes

import React from 'react'

import { IconButton } from 'playbook-ui'

const IconButtonClick = (props) => (
  <div>
    <IconButton
        onClick={() => alert('Click!')}
    />
  </div>
)

export default IconButtonClick