Bolt Design System

Web Component Usage

Bolt Button is a web component, you can simply use <bolt-button> in the markup to make it render.

This is a button

<bolt-button url="https://google.com">
  This is a button
</bolt-button>

Basic Usage

To use icon in combination with text within the button, you must pass <bolt-icon> with a slot attribute defined as either before or after.

Note: the slot attribute is required in order for the icon to be placed and spaced correctly within the button. Even if icon-only option is turned on, slot is still required.

This is a button

<p>
  <bolt-button>
    <span slot="before"><!-- Icon or image markup --></span>
    This is a button
  </bolt-button>
</p>
<p>
  <bolt-button>
    This is a button
    <span slot="after"><!-- Icon or image markup --></span>
  </bolt-button>
</p>
<p>
  <bolt-button icon-only>
    <span slot="before"><!-- Icon or image markup --></span>
    This is a button
  </bolt-button>
</p>

Advanced Usage

The web component has all the options shown in the schema table. You can define each prop within the <bolt-button> element. Use unique combinations to customize a button to your liking.

Note: the hierarchy prop is named color instead.

This is a button

<bolt-button
  url="https://pega.com"
  size="large"
  hierarchy="secondary"
  border-radius="full"
  icon-only
>
  <span slot="before"><!-- Icon or image markup --></span>
  This is a button
</bolt-button>