---
name: Button
menu: Components
route: /components/button
---

import { Playground, PropsTable } from "docz";
import { Button, Radio } from "@personio/ui-components";
import { State, Toggle } from "react-powerplug";
import "./button.scss";

# Button

Use Personio's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

<PropsTable of={Button} />

## Examples

Personio includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<Playground>
  <div className="buttonContainer">
    <Button theme="primary">Primary</Button>
    <Button theme="default">Default</Button>
    <Button theme="success">Success</Button>
    <Button theme="danger">Danger</Button>
    <Button theme="link">Link</Button>
  </div>
</Playground>

## Outline

<Playground>
  <div className="buttonContainer">
    <Button theme="primary" outline>
      Primary
    </Button>
    <Button theme="default" outline>
      Default
    </Button>
    <Button theme="success" outline>
      Success
    </Button>
    <Button theme="danger" outline>
      Danger
    </Button>
    <Button theme="link" outline>
      Link
    </Button>
  </div>
</Playground>

## Block levels

Create block level buttons—those that span the full width of a parent—by adding the prop block.

<Playground>
  <Button theme="primary" block>
    Click me
  </Button>
</Playground>

## Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to buttons as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

<Playground>
  <Button theme="primary" active>
    Click me
  </Button>
</Playground>

## Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any button element.

<Playground>
  <Button theme="primary" disabled>
    Click me
  </Button>
</Playground>

## Loading state

Sometimes you want to indicate that the button is waiting for some data. In this case, you can use the prop loading in order to show a beautiful spinner.

<Playground>
  <State initial={{ loading: false }}>
    {({ state, setState }) => (
      <Button
        theme="primary"
        loading={state.loading}
        onClick={() => setState({ loading: !state.loading })}
      >
        Click me
      </Button>
    )}
  </State>
</Playground>

## Acting as anchor

There are a couple of times you need to have a behaviour of an anchor, like for linking some page. You can set the prop actAsAnchor in order
to change the base element from a button to an anchor

<Playground>
  <Button
    theme="primary"
    actAsAnchor
    href="http://www.personio.de"
    target="_blank"
    rel="noopener noreferrer"
  >
    Open personio webpage
  </Button>
</Playground>

## Icon

You can append events on the button, as the click. Note that if the component is disabled, it will not call for this event.

<Playground>
  <div className="buttonContainer">
    <Button icon="envelope">Click me</Button>
    <Button icon="envelope" />
  </div>
</Playground>

## Events

You can append events on the button, as the click. Note that if the component is disabled, it will not call for this event.

<Playground>
  <Button
    theme="primary"
    onClick={args => {
      console.log(args);
    }}
  >
    Click me
  </Button>
</Playground>
