A basic element that can handle switching between anchor and button links, linking to trigger actions on the page, and making entire blocks clickable.


A content button can trigger actions, such as opening a content overlay or scrolling to an element by using href="#id". Content buttons also handles issues such as linking entire blocks of content, or having a smaller link within a larger link.


If no href is provided or the href is equivalent to "#", the role="button" attribute will automatically be applied and the href will be changed to javascript:void(0);


Property Attribute Description Type Default
class class string ''
clickableBlock clickable-block boolean false
controls controls string undefined
expanded expanded string undefined
href href string undefined
linkClass link-class string undefined
linkLabel link-label string undefined
target target string undefined


Event Description Type
contentBlockActivated CustomEvent<HTMLElement>


Slot Description
Default slot, same as content slot.
"activatedContent" If this slot is used, the content in this will be scrolled to and triggered.
"content" Inner contents of the button, usually plaintext.


View Example in New Window
Content Blocks free of warranty. All rights reserved.
Structural Preview


  • Description
  • Benefits
  • Accessibility
  • Properties
  • Events
  • Slots
  • Examples