AuthActionButton Component Demo

A smart authentication-aware button that changes based on login state

How it works

Not logged in: Button shows "Subscribe Now"
Logged in: Button shows "View Dashboard"
The component automatically detects authentication state from the store

Primary Variant

Default button style with red background

Small Size

Medium Size (Default)

Large Size

Secondary Variant

Outlined style with transparent background

Small Size

Medium Size

Large Size

Tertiary Variant

Text-only style with no border

Medium Size

Custom Styling

Examples with custom CSS classes

Full Width Button

Centered with Max Width

Custom URLs

Buttons with custom redirect URLs

Custom Dashboard URL

Logged in → /my-custom-dashboard | Not logged in → /custom-signup

Usage Examples

Basic Usage

<AuthActionButton client:load />

With Custom Props

<AuthActionButton 
  client:load
  variant="secondary"
  size="lg"
  dashboardUrl="/dashboard"
  trialUrl="/signup"
  customCss="w-full"
/>

With GTM Tracking

<AuthActionButton 
  client:load
  data-gtm-event="cta_click"
  data-gtm-category="conversion"
/>

Testing Authentication State

To test the button's behavior with different auth states, you can modify the userProfileInStore in your browser's console:

// Simulate logged in state
import { userProfileInStore } from './stores/authStore';
userProfileInStore.set({ id: 1, email: 'test@example.com', name: 'Test User' });

// Simulate logged out state
userProfileInStore.set({ id: null, email: null, name: null });

Component Location: src/components/Common/AuthActionButton.svelte

Documentation: docs/components/AuthActionButton.md