Partial Component

Button

The Button partial is a base UI element used throughout the component system. It provides consistent styling and behavior for call-to-action elements, supporting multiple visual styles.

Manifest

{
  "name": "button",
  "type": "_partials",
  "styles": ["button.css"],
  "scripts": [],
  "requires": []
}

Configuration

ctas:
  - url: '/contact'
    label: 'Get Started'
    isButton: true
    buttonStyle: 'primary'
  - url: '/learn-more'
    label: 'Learn More'
    isButton: true
    buttonStyle: 'secondary'
    isSmall: true

Configuration Options

Property	Type	Required	Default	Description
`url`	string	Yes	-	Link destination URL
`label`	string	Yes	-	Button text
`isButton`	boolean	No	true	Render as button vs text link
`buttonStyle`	string	No	'primary'	Visual style: 'primary', 'secondary', 'tertiary'
`isSmall`	boolean	No	false	Render as small button

Examples

Standard button sizes in all three styles:

Primary Button Secondary Button Tertiary Button

Small buttons for compact UI elements:

Small Primary Small Secondary Small Tertiary

Usage in Templates

{% from "components/_partials/button/button.njk" import button %}

{{ button(cta) }}

Notes

Primary, secondary, and tertiary visual styles
Standard and small button sizes
External Links open new window handling with proper rel attributes
ARIA labels and keyboard navigation support
Interactive visual feedback