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 style prop is named color instead.
<bolt-button
url="https://pega.com"
size="large"
color="secondary"
border-radius="full"
tag="a"
icon-only
>
<bolt-icon name="menu" slot="before"></bolt-icon>
This is a button
</bolt-button>
Server-side Rendered Web Components (Experimental)
The <bolt-button> component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!
<bolt-button>
This is a button
<bolt-icon name="chevron-right" slot="after"></bolt-icon>
</bolt-button>
Debug Panel