Button Widget

The Button widget lets you create calls-to-action with consistent styling and deep links.

Add a Button widget

Button Settings dialog

The dialog includes tabs for:

• Settings: Button Text, Accessibility Label, Button Color, Hover Color, Transition (Fade, Scale, Bump, Rotate, Skew), Padding, Full Width, Alignment, Icon, Icon Size, Link Address.
• Text Styles: Font Family, Text Color, Text Format, Hover Text Color, Text Alignment, Font Size, Letter Spacing, Line Height.
• Border: Border Color, Style (Solid, Dotted, Dashed, Double), Border Width, Border Radius, Shadow.

Generated and imported buttons can carry their color, text color, hover color, padding, border radius, alignment, icon, and link settings into the Button widget. When you switch between button style presets, Hiveality keeps the button text, link, icon, accessibility label, width, and alignment where possible.

Toolbar actions

When the button is selected, use:

• Button Settings
• Button Type (Primary, Secondary, Third)
• Full Width
• Alignment
• Link
• Animation
• Position
• Copy
• Delete

If the button is in a header, you can also set mobile behavior (Mobile: Show, Mobile: Hide, Slideout Only).

Accessibility and link guardrails

• Icon-only buttons and buttons with generic text can use Accessibility Label so screen readers get a clear action name.
• Button settings warn when a link is missing, still uses a placeholder, or uses an unsafe URL.
• Global button styles use the same label and link checks, so repeated buttons stay consistent across pages.

Link tip for homepage sections

If you link a button to a section on your homepage, the saved link now uses a clean hash format (for example, #pricing) instead of adding the homepage slug.

Icon tips

• Button icons can be placed before or after the label.
• Use Icon Size when the icon needs to feel lighter or stronger than the button text.
• Published buttons keep the selected icon size and spacing more consistently across regular and global button styles.