Bolt Design System

Twig Usage

  {% include '@bolt-elements-button/button.twig' with {
  content: 'This is a button',
  attributes: {
    type: 'submit'
  }
} only %}

Schema

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
content *	Content of the button.	`any`	—	—
icon_before	Append an icon before the button content. Icon component is recommended. However, <img> elements are also acceptable.	`any`	—	—
icon_after	Append an icon after the button content. Icon component is recommended. However, <img> elements are also acceptable.	`any`	—	—
icon_only	Append an icon to the button content and visually hide the text content. This prop trumps icon_before and icon_after.	`any`	—	—
hierarchy	Style the button appropriately based on information hierarchy.	`string`	`primary`	`primary` , `secondary` , `tertiary` , `transparent`
size	Control the font-size and padding of the button.	`string`	`medium`	`xsmall` , `small` , `medium` , `large`
border_radius	Control the border radius of the button.	`string`	`small`	`small` , `large` , `full`
display	Control the display of the button.	`string`	`inline`	`inline` , `block` , `inline@from-small`

Install

  npm install @bolt/elements-button

Dependencies

@bolt/components-icon

@bolt/core-v3.x

@bolt/lazy-queue

Button