Button

<Button
  onClick={[Function onClick]}
>
  Click me!
</Button>

Adjusting to flex container

<div
  style={
    Object {
      "display": "flex",
    }
  }
>
  <Button
    adjust="flex"
  >
    flex
  </Button>
  <Button
    adjust="auto"
  >
    auto
  </Button>
  <Button
    adjust="auto"
  >
    auto
  </Button>
</div>

Sizes

<div
  style={
    Object {
      "alignItems": "center",
      "display": "flex",
    }
  }
>
  <Button
    size="sm"
  >
    Small Button
  </Button>
  <Button>
    Default Button
  </Button>
</div>

Primary and subtle

<div
  style={
    Object {
      "display": "flex",
    }
  }
>
  <Button
    icon="heart"
    isPrimary={true}
    isSubtle={true}
  >
    Subtle button
  </Button>
  <Button
    isPrimary={false}
  >
    Cancel
  </Button>
  <Button
    isPrimary={true}
  >
    Primary button
  </Button>
</div>

Hints

Hints can be used for displaying keyboard shortcuts.

<div>
  <Button>
    Small Button 
    <ButtonHint>
      [Ctrl+Enter]
    </ButtonHint>
  </Button>
</div>

Setting button types explicitly

If you use the button inside a form you may want to control the type of your button. By default the type `button` will be used. If you create a primary button the type will be set to `submit` automatically.

<div>
  <Button
    isPrimary={true}
    type="button"
  >
    Primary button that wont submit
  </Button>
  <Button
    type="submit"
  >
    Submit
  </Button>
  <Button
    type="reset"
  >
    Reset
  </Button>
</div>

Icons

Hints can be used for displaying keyboard shortcuts.

<div>
  <Button
    icon="heart"
  >
    Button with icon
  </Button>
  <Button
    icon="heart"
  />
</div>

Disabling buttons

Buttons can be disabled to show that their action is not available right now.

<div>
  <Button
    isEnabled={false}
    isPrimary={true}
  >
    Disabled primary button
  </Button>
  <Button
    isEnabled={false}
  >
    Disabled button
  </Button>
</div>