Skip to main content

Button

Basic button, with optional icon.

Props​

  • label (string): Button content. Supports light markdown.
  • [OPTIONAL] id (string): id HTML attribute to set to the element.
  • [OPTIONAL] type (button|submit): type HTML attribute to set to the element. Defaults to "button".
  • [OPTIONAL] iconPosition (left|right): Position of the icon relatively to the label. Defaults to "left".
  • [OPTIONAL] icon (string): Name of the icon to set to the element.
  • [OPTIONAL] modifiers (string): List of modifiers to apply to the element. Defaults to "".
  • [OPTIONAL] disabled (boolean): When element is disabled, a special disabled modifier is automatically added, and all its user interactions are disabled. Defaults to false.

Events​

  • click (event: MouseEvent) => void: HTML click event handler.
  • focus (event: FocusEvent) => void: HTML focus event handler.

Syntax - label only​

<UIButton
  id="my-id"
  type="submit"
  label="Lorem ipsum"
  modifiers="large primary"
  onClick={myClickHandler}
  onFocus={myFocusHandler}
/>

Syntax - label with left icon​

<UIButton
  icon="star"
  iconPosition="left"
  label="Lorem ipsum"
/>

Syntax - label with right icon​

<UIButton
  icon="star"
  iconPosition="right"
  label="Lorem ipsum"
/>

Syntax - icon only​

<UIButton
  icon="star"
/>

Syntax - disabled​

<UIButton
  disabled
  label="Lorem ipsum"
/>