content-button
Description
A basic element that can handle switching between anchor and button links, linking to trigger actions on the page, and making entire blocks clickable.
Benefits
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.
Accessibility
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);
Properties
| 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 |
Events
| Event |
Description |
Type |
contentBlockActivated |
|
CustomEvent<HTMLElement> |
Slots
| 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. |