Warning! The Button component is deprecated. No new features will be added to this component. See each page under Components/Button section in the navigation to reference old documentation. For any new instances of a button please use the Button element.
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://pega.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

This is a button

This is a button 

<p>
  <bolt-button>
    <bolt-icon name="chevron-left" slot="before"></bolt-icon>
    This is a button
  </bolt-button>
</p>
<p>
  <bolt-button>
    <bolt-icon name="chevron-right" slot="after"></bolt-icon>
    This is a button
  </bolt-button>
</p>
<p>
  <bolt-button icon-only>
    <bolt-icon name="close" slot="before"></bolt-icon>
    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
>
  <bolt-icon name="menu" slot="before"></bolt-icon>
  This is a button
</bolt-button>