Buttons
This section defines interactive elements and their states, ensuring consistent behavior and clear visual hierarchy across links and buttons.
Button interactions are grouped in the Interactions (X) panel and begin with Button, making them easier to identify and manage. The button and button-text-link classes are used as triggers for button interactions. Any element using either class can activate its connected hover or click animations.
Important: To remove a specific animation from a button, do not delete or disable the interaction in the Interactions (X) panel, as it may be shared by other button variations. Instead, remove the related animation element from the button structure. Animation element class names always begin with animation-, making them easy to identify in the Navigator.
Text Button Base
Define the default text button settings that all addon variations inherit.
You can add new text button variations by copying the existing components and customizing them with their respective addon classes. This keeps the base styling consistent while allowing each variation to be adjusted as needed. View color options in the section below.
Base
button-text-link
|
|
Text Block
|
position-absolute-bottom
width-100
|
|
animation-button-underline-expand
or
animation-button-underline-collapse
|
|
divider-solid
Icon - Direction Right
button-text-link
|
|
Text Block
|
animation-button-icon-move-right
|
|
Icon - Button Direction
is-right
Icon - Direction Down
button-text-link
|
|
Text Block
|
animation-button-icon-move-down
|
|
Icon - Button Direction
is-down
Icon - Open in New Tab Link
button-text-link
|
|
Text Block
|
animation-button-icon-move-right
|
|
animation-button-icon-scale-up
|
|
icon-size-*
|
|
Text Button Colors
Secondary
button-text-link
is-secondary
Tertiary
button-text-link
is-tertiary
Alternate
button-text-link
is-alternate
Success
button-text-link
is-success
Warning
button-text-link
is-warning
Button Base & Content Structure
Define the default button settings that all addon variations inherit.
You can add new button variations by copying the existing components and customizing them with their respective addon classes. This keeps the base styling consistent while allowing each variation to be adjusted as needed. View color options in the
sections below.
The
is-checked and
current addon classes modify the base button style to reflect active states. Use
is-checked to indicate a clicked or selected button—this is typically applied via custom behavior for custom form inputs. The
current class is automatically applied to link buttons when the linked page or section is active. Styling for both states can be adjusted in the
sections below.Horizontal Content
button
|
|
button-content
|
|
icon-size-*
|
Text Block
|
animation-icon-move-right
|
|
Icon Button Direction
is-right
Vertical Content
button
|
|
button-content
flex-vertical
|
icon-size-*
|
Text Block
Offset
button
|
|
button-content
|
button-offset
Horizontal Content Animation
overflow-clip
border-radius-button
|
|
button
|
|
animation-content-slide-horizontal
|
|
button-content
Vertical Content Animation
overflow-clip
border-radius-button
|
|
button
|
|
animation-content-slide-vertical
|
|
button-content
Horizontal Backdrop Animation
overflow-clip
border-radius-button
|
|
button
|
|
position-absolute-overlay
offset-tiny
|
|
animation-backdrop-collapse-horizontal
or
animation-backdrop-expand-horizontal
|
|
background-color-*
Vertical Backdrop Animation
overflow-clip
border-radius-button
|
|
button
|
|
position-absolute-overlay
offset-tiny
|
|
animation-background-collapse-vertical
or
animation-background-expand-vertical
|
|
background-color-*