Button

Buttons with Icons

Buttons can contain Icons at their start, end, or both.

small Buttons use small Icons; medium and large Buttons use medium Icons; jumbo Buttons use large Icons.





() => {
  const icon = <IconCloud />;

  return (
    <DemoLayout>
      <Button iconStart={icon}>Start icon</Button>
      <Button iconEnd={icon}>End icon</Button>
      <Button iconStart={icon} iconEnd={icon}>Both icons</Button>
      <br /><br />
      <Button iconStart={icon} primary>Primary</Button>
      <Button iconStart={icon} minimal>Minimal</Button>
      <Button iconStart={icon} variant="danger">Danger</Button>
      <Button iconStart={icon} variant="success">Success</Button>
      <Button iconStart={icon} variant="warning">Warning</Button>
      <Button iconStart={icon} disabled>Disabled</Button>
      <br /><br />
      <Button iconStart={icon} size="small">Small</Button>
      <Button iconStart={icon} size="medium">Medium</Button>
      <Button iconStart={icon}>Large</Button>
      <Button iconStart={icon} size="jumbo">Jumbo</Button>
    </DemoLayout>
  );
}