Mini-Pattern: Primary Button

Pattern Documentation

Theme Modifiers (CSS, Javascript)

This pattern styling is affected by modifiers; see the Kadence Build Strategy Documentation.

CSS styles applied to every button block that displays an arrow after text on hover/focus. Because of this, icons should NOT be added to button block after the text.

Kadence Modification Notes

  • Default Primary Button:
    • Button Inherit Styles: Fill
    • Button Size: MD
    • Button Width: Auto
    • Border Radius: 360px all sides
    • Font-size: 16px
    • Line-height: 1
    • Font-weight: 500
    • Letter-spacing: 0.24px
    • Icon (optional):
      • Icon Size: 16px
    • Padding: 8px (top/bottom), 16px (right/left)
  • Large Primary Button:
    • Button Inherit Styles: Fill
    • Button Size: LG
    • Button Width: Auto
    • Border Radius: 360px all sides
    • Font-size: 18px
    • Line-height: 1
    • Font-weight: 500
    • Letter-spacing: 0.18px
    • Icon (optional):
      • Icon Size: 24px
    • Padding: 12px (top/bottom), 24px (right/left)

Pattern Library Organization

  • Categories: Buttons
  • Search Keywords: button, primary button, icon button