Button

Buttons allow the user to trigger an action by pressing them. The action the button triggers should be communicated using the label on the button.

Props

'button' │ 'a' │ elementType

'button'

block

Bool

false

className

String

[Empty string]

disabled

Bool

false

forwardedRef

Custom

iconOnly

Bool

size

'small' │ 'medium' │ 'large'

'medium'

theme

'primary' │ 'secondary' │ 'link'

'primary'

Examples

Theme Modifiers

<div className="docs-inline-group">
  <Button>Primary</Button>
  <Button theme="secondary">Secondary</Button>
  <Button theme="link">Link</Button>
</div><div className="docs-inline-group">
  <Button>Primary</Button>
  <Button theme="secondary">Secondary</Button>
  <Button theme="link">Link</Button>
</div>

Size Modifiers

<div className="docs-inline-group">
  <Button size="large">Large</Button>
  <Button>Medium</Button>
  <Button size="small">Small</Button>
</div><div className="docs-inline-group">
  <Button size="large">Large</Button>
  <Button>Medium</Button>
  <Button size="small">Small</Button>
</div>

Disabled Modifier

<Button disabled>Disabled Button</Button><Button disabled>Disabled Button</Button>

Block Modifier

<Button block>Block Button</Button><Button block>Block Button</Button>

Button with Icon

<Button>
  <Icon className="mr-2" icon="close" size="xsmall" /> Close
</Button><Button>
  <Icon className="mr-2" icon="close" size="xsmall" /> Close
</Button>

Button as Link

I'm a Link!

<Button as="a" href="http://www.kw.com" target="_blank">
  I'm a Link!
</Button><Button as="a" href="http://www.kw.com" target="_blank">
  I'm a Link!
</Button>

Icon Button

<div className="docs-inline-group">
  <Button iconOnly size="large">
    <Icon icon="contacts" size="large" />
  </Button>
  <Button iconOnly>
    <Icon icon="contacts" />
  </Button>
  <Button iconOnly size="small">
    <Icon icon="contacts" size="small" />
  </Button>
</div><div className="docs-inline-group">
  <Button iconOnly size="large">
    <Icon icon="contacts" size="large" />
  </Button>
  <Button iconOnly>
    <Icon icon="contacts" />
  </Button>
  <Button iconOnly size="small">
    <Icon icon="contacts" size="small" />
  </Button>
</div>

Button

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Props