The Button components will be used throughout the EEWA website for navigation and exploration.

There will be different Button components to be created based on different usage throughout the entire EEWA website.

We will break things down based on button actions, and from each button action there will be variants for the button styles.

Tentatively, there will be 10 different variants for the Button components

Colour to variable reference (check out #19 for more details):

• Yellow: primary
• Purple: accent
• White: background
• Gray: muted
• Any text colours: XXX-foreground

For all colour variables mentioned, refer to globals.css in #19
Refer to Button UI designs for more details.

Primary Buttons

Role: Emphasises the most important action on a given view, or indicates an active/selected state (e.g. active tab, current step).
Style: Solid --> yellow background, yellow border, black text
Usage:

• Active/current tab indicator
• Primary form progression (e.g. "Next", "Continue")
• Filter chips in their selected state (e.g. on the Events page)

Variant(s) to create:

• Label only button (e.g. "Current Events", "Next")
  
  
• Icon + Label button (e.g. filter buttons with a leading icon)
  
  

Secondary Buttons

Role: Represents inactive, alternative, or lower-priority actions. Used alongside Primary buttons to give users a clear visual hierarchy between active and inactive options.
Style: Ghost --> white background, yellow border, black text
Usage:

• Inactive/unselected tabs
• Alternative actions alongside a Primary button (e.g. "Cancel" next to "Submit")
• Filter chips in their unselected state

Variant(s) to create:

• Label only button (e.g. "Past Events", "Back")
  
  
• Icon + Label button (e.g. unselected filter buttons with a leading icon)
  
  

Notes:

• To add hover effect
  • Transition to light yellow (secondary) fill

CTA (Call to Action) Buttons

Role: Drives a specific high-intent user action. Ideally, it will implement the accent colour to stand out and draw user's attention. Should be used sparingly to prevent impact dilution.
Style: Solid --> 70% opacity purple background, purple border, white text (optional bolded)
Usage:

• Form submission (e.g. "Submit" on the Contact page)
• Any action that requires deliberate user commitment

Variant(s) to create:

• Label only button
  
  

Notes:

• 70% opacity is just a placeholder
• Could use full opacity purple for a hover effect (could potentially reuse "Label only active button" from pagination/navigation section
• Will be tweaking some colour variables in globals.css. Most likely to override tailwind default colour classes and use colour-value class.

Pagination/Navigation Buttons

Role: Allows users to navigate between pages of content. Active and inactive states must be visually distinct so users always know where they are.
Style:

• Active: Solid --> purple background, purple border, white text
• Inactive: Ghost --> white background, gray border, black text
• Endpoints: Ghost --> white background, gray border, gray icon
  Usage:
  • Page number navigation on any paginated list (e.g. articles, events)
  • Previous / Next controls

Variant(s) to create:

• Label only active button (e.g. current page number)
  
  
• Label only inactive button (e.g. other page numbers)
  
  
• Icon only inactive button (e.g. previous/next page arrows)
  
  
• Icon only endpoint buttons (e.g. at starting / ending pages )
  
  

Notes:

• Could add hover effect to inactive buttons (endpoint buttons should not have hover effect / be clickable)
  • Explore transitioning to lighter purple fill

Text Link Buttons

Role: A lightweight, low-emphasis action that sits inline with content. Used for tertiary actions where a full button would feel too heavy.
Style: Inline text link --> no background, no border, purple text (optional bolded)
Usage:

• "Read full article" at the bottom of a content card
• "View more" / "View all" on a section with truncated results
• Any action where the user is being invited to explore further rather than commit to an action

Variant(s) to create:

• Icon + Label + Inline text link button (e.g. "Read more" + arrow icon)
  
  

Notes:

• Could add hover effects
  • Explore transitioning to underlined text