Bolt Button

A Pega branded call to action.

Published

Last updated: 2.26.2

Change log

Github

NPM

Twig Usage

{% include "@bolt-components-button/button.twig" with { text: "This is a button" } only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
text *	Text inside the button.	`string`	—	—
transform	Transforms the button text to various cases.	`string`	`none`	`uppercase` , `lowercase` , `capitalize` , `none`
type	Determines the button tag type for semantic buttons	`string`	—	`button` , `submit` , `reset`
size	Size of the button.	`string`	`medium`	`xsmall` , `small` , `medium` , `large` , `xlarge`
style	Style of the button determined by information hierarchy.	`string`	`primary`	`primary` , `secondary` , `tertiary` , `text`
width	Controls the width of the button.	`string`	`auto`	`auto` , `full` , `full@small`
border_radius	Rounds the corners of the button.	`string`	`regular`	`regular` or `full`
align	Horizontal alignment of items (text and icon) inside the button. Note: the values left and right are deprecated, use start and end instead.	`string`	`center`	`start` , `center` , `end`
icon	Icon data as expected by the icon component. Accepts an additional position prop that determines placement within the link.	`object`	—	`position` Where to position the icon within the button `before` or `after` `attributes` A Drupal-style attributes object with extra attributes to append to this component. — `name` Icon name — `background` Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than `none` will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes! `none` , `circle` , `square` `size` Icon size. `small` , `medium` , `large` , `xlarge` `color` Icon color palette. Picking an option other than `auto` will override the default colors based on the color theme is placed within. `auto` , `teal` , `blue` , `indigo` , `yellow` , `orange` , `gray` , `green` , `white` , `pink`
iconOnly	Make the button to display only the icon and hide the text (which is still required). You are required to pass both text and icon data for this option to work.	`boolean`	`false`	—
url	If present, users will be directed to this URL when clicking this element.	`string`	—	—
target	A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present.	`string`	`_self`	`_blank` , `_self` , `_parent` , `_top` , `framename`
disabled	Whether the click action should be disabled for this element.	`boolean`	`false`	—
onClick	When used with onClickTarget, an event to fire on the targeted elements when this element is clicked. When used without onClickTarget, arbitrary javascript to execute when this element is clicked.	`string`	—	—
onClickTarget	Requires onClick. A CSS selector for elements that the onClick event will fire on when this element is clicked.	`string`	—	—
itemAlignment (deprecated)	Use the align parameter instead.	—	—	—
rounded (deprecated)	Use the border_radius parameter instead.	—	—	—
tag (deprecated)	Switch to using the new type prop instead.	`string`	`button`	`a` , `link` , `button` , `submit` , `reset`

Install

npm install @bolt/components-button

Dependencies

@bolt/components-icon

@bolt/core-v3.x

@bolt/element

@bolt/lazy-queue

This is a button

Note: medium is the default size.

This is a xsmall button

This is a small button

This is a medium button

This is a large button

This is a xlarge button

Primary button

Primary button (disabled)

Secondary button

Secondary button (disabled)

Tertiary button

Tertiary button (disabled)

Text button

Text button (disabled)

Buttons inside a xdark theme

Primary button

Secondary button

Tertiary button

Text button

Buttons inside a dark theme

Primary button

Secondary button

Tertiary button

Text button

Buttons inside a light theme

Primary button

Secondary button

Tertiary button

Text button

Buttons inside a xlight theme

Primary button

Secondary button

Tertiary button

Text button

Note: full@small means that the button will go from auto width to full width when the browser goes below the small breakpoint.

This is a auto width button

This is a full width button

This is a full@small width button

This button has regular border radius

This button has full border radius

Note: the align prop only works with full width buttons.

This button's items are aligned to the start

This button's items are aligned to the center

This button's items are aligned to the end

This button has text tranform of uppercase

This button has text tranform of lowercase

This button has text tranform of capitalize

This button has text tranform of none

This button's type is: button

This button's type is: submit

This button's type is: reset

Note: when passing icons inside a button, it is required to define the icon's position, by default it is set to after, which means the icon will come after the text.

Icon position set to before

This button has text and icon

Icon position set to after

This button has text and icon

Note: an icon-only button still is still required to have text, and that text is accessible through screen readers. It's just visually hidden.

This button's text is still accessible, it's just visually hidden. Xsmall icon-only button

This button's text is still accessible, it's just visually hidden. Small icon-only button

This button's text is still accessible, it's just visually hidden. Medium icon-only button

This button's text is still accessible, it's just visually hidden. Large icon-only button

This button's text is still accessible, it's just visually hidden. Xlarge icon-only button

Full border radius (circle icon-only button)

This button's text is still accessible, it's just visually hidden.

Examples with different icons

This button's text is still accessible, it's just visually hidden. This button's text is still accessible, it's just visually hidden. This button's text is still accessible, it's just visually hidden. This button's text is still accessible, it's just visually hidden. This button's text is still accessible, it's just visually hidden. This button's text is still accessible, it's just visually hidden.

Add a js- target class for the button to perform something through javascript

Toggle theme with javascript

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

<bolt-button> <bolt-icon name="chevron-left" slot="before"></bolt-icon> This is a button </bolt-button> <bolt-button> <bolt-icon name="chevron-right" slot="after"></bolt-icon> This is a button </bolt-button> <bolt-button icon-only> <bolt-icon name="close" slot="before"></bolt-icon> This is a button </bolt-button>

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.

This is a button

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

button

button docs

Bolt Button

A Pega branded call to action.

button

button size variations

button style variations

button theme variations

Buttons inside a xdark theme

Buttons inside a dark theme

Buttons inside a light theme

Buttons inside a xlight theme

button width variations

button border radius variations

button align variations

button transform variations

button type variations

button with text and icon

Icon position set to before

Icon position set to after

button icon only

Full border radius (circle icon-only button)

Examples with different icons

button with 3rd party js

Add a js- target class for the button to perform something through javascript

button with web component

button

button docs Show Code Hide Code

Bolt Button

A Pega branded call to action.

button Show Code Hide Code

button size variations Show Code Hide Code

button style variations Show Code Hide Code

button theme variations Show Code Hide Code

Buttons inside a xdark theme

Buttons inside a dark theme

Buttons inside a light theme

Buttons inside a xlight theme

button width variations Show Code Hide Code

button border radius variations Show Code Hide Code

button align variations Show Code Hide Code

button transform variations Show Code Hide Code

button type variations Show Code Hide Code

button with text and icon Show Code Hide Code

Icon position set to before

Icon position set to after

button icon only Show Code Hide Code

Full border radius (circle icon-only button)

Examples with different icons

button with 3rd party js Show Code Hide Code

Add a js- target class for the button to perform something through javascript

button with web component Show Code Hide Code

button docs

button

button size variations

button style variations

button theme variations

button width variations

button border radius variations

button align variations

button transform variations

button type variations

button with text and icon

button icon only

button with 3rd party js

button with web component