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.
<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.
<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>