@personio/ui-docs/components/arrow-button/arrow-button.mdx

---
name: ArrowButton
menu: Components
route: /components/arrow-button
---

import { Playground, PropsTable } from 'docz'
import { Button, Icon, ArrowButton } from '@personio/ui-components'
import './styles.scss'

# ArrowButton

<PropsTable of={ArrowButton} />

## Examples

<Playground>
  <div className="close-button-container">
    <ArrowButton direction="down" onClick={(event) => {
      event.preventDefault()
    }} />
    <ArrowButton direction="up" onClick={() => {
      console.log('You pressed up')
    }} />
    <ArrowButton direction="left" onClick={() => {
      console.log('You pressed left')
    }} />
    <ArrowButton direction="right" onClick={(event) => {
      console.log('You pressed right')
    }} />
    <ArrowButton disabled direction="right" onClick={() => {
      console.log('You pressed right')
    }} />
  </div>
</Playground>