Button Playground

This page showcases all button variants used across the application. Use this as a reference when working on button consolidation.

Current Button Implementation Stats

Shadcn UI Buttons

Found in 6 files

HeroUI Buttons

Found in 20+ files

Custom Button Components

4 custom implementations

Default Button (shadcn)

shadcn

The default button variant from shadcn/ui button component

Usage Count: 6
Source: components/ui/button.tsx
Used in:
  • components/root/Products/BaseArcanaCard.jsx
  • components/ui/carousel.jsx
  • app/(root)/onboarding/pricing/SingleChart.jsx
  • app/(member)/chart/[slug]/cycles/ArcanaCycleSlider.jsx

MX Blue Button

shadcn

Custom mx-blue variant with gradient background

Usage Count: 3
Source: components/ui/button.tsx
Used in:
  • app/(member)/checkout-success/[slug]/page.js
  • components/ChartOverview/Buttons.jsx

HeroUI Default Button

heroui

Default button from HeroUI library

Usage Count: 20
Source: @heroui/button
Used in:
  • components/Buttons/Action.jsx
  • components/Buttons/Social.jsx
  • components/ChartPagesModal.jsx

Social Button

custom

Core social button component using HeroUI, used extensively across pricing, bundles, and feature unlocking

Usage Count: 17
Source: components/Buttons/Social.jsx
Used in:
  • components/Credits/UnlockChart.jsx
  • components/Credits/UnlockConnection.jsx
  • components/Credits/ApplyButton.js
  • components/UpgradeBox.js
  • components/PricingArcana/ArcanaC.jsx
  • components/PricingArcana/Bundle.jsx
  • components/PricingArcana/KarmicTails.jsx
  • components/PricingArcana/ArcanaM.jsx
  • components/PricingVideoCourse/Bundle.jsx
  • components/PricingVideoCourse/Product.jsx
  • app/(member)/video-courses/[courseSlug]/[sectionSlug]/[videoSlug]/Comments.jsx
  • app/(root)/onboarding/pricing/ThreeChartBundle.jsx
  • app/(root)/onboarding/pricing/MxPro.jsx
  • app/(root)/onboarding/pricing/PricingCard.jsx
  • app/(member)/charts/client.jsx
  • app/(member)/insights/client.jsx
  • and more...

Social Button (Buy Now)

custom

Social button variant used in product bundles and courses with rounded corners and extra padding

Usage Count: 4
Source: components/Buttons/Social.jsx
Used in:
  • components/PricingArcana/Bundle.jsx
  • components/PricingVideoCourse/Product.jsx

Social Button (Course View)

custom

Blue gradient variant used for accessing purchased video courses

Usage Count: 2
Source: components/Buttons/Social.jsx
Used in:
  • components/PricingVideoCourse/Product.jsx
  • app/(member)/insights/client.jsx

Action Button

custom

Custom action button component using HeroUI

Usage Count: 8
Source: components/Buttons/Action.jsx
Used in:
  • components/GoDeeper.jsx

Colorful Border Button

custom

Custom button with animated colorful border

Usage Count: 2
Source: components/Buttons/ColorfulBorder.jsx
Used in:
    Colorful Border

    Submit Button (HeroUI)

    heroui

    Purple submit button with rounded corners, used in forms

    Usage Count: 1
    Source: @heroui/button
    Used in:
    • app/(member)/chart/[slug]/edit/Form.jsx

    Danger Button (HeroUI)

    heroui

    Small danger button used for destructive actions like deletion

    Usage Count: 1
    Source: @heroui/button
    Used in:
    • app/(member)/chart/[slug]/edit/Form.jsx

    Settings Button (HeroUI)

    heroui

    Purple button with white text, used in settings pages

    Usage Count: 5
    Source: @heroui/button
    Used in:
    • app/(member)/settings/cancel-subscription-steps/AcceptedOfferStep.jsx
    • app/(member)/settings/cancel-subscription-steps/OfferStep.jsx
    • app/(member)/settings/cancel-subscription-steps/SurveyStep.jsx
    • app/(member)/settings/cancel-subscription-steps/InitialStep.jsx
    • app/(member)/settings/cancel-subscription-steps/DeclinedOfferStep.jsx

    Credits Button (HeroUI)

    heroui

    Purple button with pink text, used for credits-related actions

    Usage Count: 3
    Source: @heroui/button
    Used in:
    • components/Credits/ApplyButton.js
    • app/(member)/chart/[slug]/cycles/CreditsComponent.jsx

    Connection Form Button (HeroUI)

    heroui

    Purple button with white text, used in connection forms

    Usage Count: 1
    Source: @heroui/button
    Used in:
    • app/(member)/connection/components/Form.jsx

    Booking Banner Button (HeroUI)

    heroui

    Dark button with sand text, used in booking banners

    Usage Count: 1
    Source: @heroui/button
    Used in:
    • components/Connection/BookingBanner.jsx

    Article Writer Button (HeroUI)

    heroui

    Purple button with pink text, used in article writer

    Usage Count: 1
    Source: @heroui/button
    Used in:
    • components/Notifications/ArticleWriter.jsx

    Pricing Social Button

    custom

    Social button used in pricing cards, with rounded corners and arrow

    Usage Count: 4
    Source: components/Buttons/Social.jsx
    Used in:
    • app/(root)/onboarding/pricing/PricingCard.jsx

    MX Pro Reactivation Button

    custom

    Sand-colored button with black text for reactivating MX Pro subscription, used when subscription is cancelled but still active

    Usage Count: 1
    Source: components/Buttons/Social.jsx
    Used in:
    • app/(root)/onboarding/pricing/PricingCard.jsx

    MX Pro Product Button

    custom

    Contextual button that changes style based on MX Pro status - sand background for Pro version

    Usage Count: 1
    Source: components/Buttons/Social.jsx
    Used in:
    • app/(root)/onboarding/pricing/PricingCard.jsx

    Pricing View Button

    custom

    Simple view button used in pricing cards when user has permission

    Usage Count: 1
    Source: components/Buttons/Social.jsx
    Used in:
    • app/(root)/onboarding/pricing/PricingCard.jsx

    Pricing Manage Button

    custom

    Management button for active MX Pro subscribers

    Usage Count: 1
    Source: components/Buttons/Social.jsx
    Used in:
    • app/(root)/onboarding/pricing/PricingCard.jsx

    Unlock Chart Button

    custom

    Pink button with purple text for unlocking charts

    Usage Count: 2
    Source: components/Buttons/Social.jsx
    Used in:
    • components/Credits/UnlockChart.jsx
    • components/Credits/UnlockConnection.jsx

    Apply Credit Button

    custom

    Purple button with pink text and lock icon for applying credits

    Usage Count: 1
    Source: components/Buttons/Social.jsx
    Used in:
    • components/Credits/ApplyButton.js

    Credit Dialog Cancel Button

    heroui

    Light danger button with rounded corners for canceling credit operations

    Usage Count: 1
    Source: @heroui/button
    Used in:
    • components/Credits/ApplyButton.js

    Credit Dialog Confirm Button

    custom

    Purple button with pink text for confirming credit operations

    Usage Count: 1
    Source: components/Buttons/Social.jsx
    Used in:
    • components/Credits/ApplyButton.js

    Library Unlock Button

    custom

    Blue gradient button for unlocking library features

    Usage Count: 1
    Source: components/Buttons/Social.jsx
    Used in:
    • components/Credits/UnlockLibrary.jsx

    Common Button Patterns

    • Purple Theme: Many buttons use bg-lt-purple with either text-white or text-lt-pink
    • Full Width: Most buttons are w-full with optional md:w-auto for responsive behavior
    • Large Size: size="lg" is commonly used across different button types
    • Rounded Corners: Most buttons use either rounded-lg, rounded-md, or rounded-full
    • Custom Heights: Some buttons specify exact heights (e.g., h-[52px], h-[62px])
    • Pricing Specific: Pricing buttons consistently use !rounded-full and !py-8 with full width
    • Credits Specific: Credit buttons use !h-[62px] height and alternate between purple/pink colors
    • Dialog Buttons: Dialog buttons use rounded-full without fixed height
    • MX Pro Specific: Pro buttons use sand background (!bg-mx-sand-a) with black text (!text-black) and no border (border-none)
    • Social Button Patterns: Used extensively in pricing and product pages with variants for purchase (!py-8 !rounded-full) and access (bg-mx-blue-gradient-a)

    Consolidation Recommendations

    • Migrate HeroUI buttons to shadcn/ui buttons for consistency
    • Create new variants in shadcn button for common custom styles (social, action)
    • Keep special buttons like ColorfulBorder as separate components
    • Standardize button sizes and padding across the application

    Louis Section Buttons

    These buttons are used across the Louis section, primarily in product pricing and bundle components.

    Product CTA Button

    custom

    Primary call-to-action button used in product pricing cards

    Usage Count: 7
    Source: components/root/Products/BasePricingCard.jsx
    Used in:
    • components/root/Products/MxCompatibilityPricing.jsx
    • components/root/Products/DestinyMatrixPricing.jsx
    • components/root/Products/RomanticPackagePricing.jsx
    • components/root/Products/LibraryBundle.jsx
    • components/root/Products/MxProCard.jsx
    • components/root/Products/ArcanaUpgradePricing.jsx
    • components/root/Products/OurProducts.jsx

    Price Selection Pill

    custom

    Interactive price selection button used in pricing sliders

    Usage Count: 7
    Source: components/root/Products/PricingPill.jsx
    Used in:
    • components/root/Products/MxCompatibilityPricing.jsx
    • components/root/Products/DestinyMatrixPricing.jsx
    • components/root/Products/RomanticPackagePricing.jsx
    $19

    Product Purchase Buttons

    Standardized button component used for product purchases across the application. Variants are based on the background color of their container: dark for dark backgrounds and light for light backgrounds.

    Dark Background Button

    custom

    Used on dark backgrounds (purple, dark red, dark blue, black). Maintains consistent text color for better readability.

    Usage Count: 4
    Source: components/ui/product-purchase-button.tsx
    Used in:
    • components/root/Products/DestinyMatrixChart.jsx
    • components/root/Products/DestinyMatrixCompatibility.jsx
    • components/root/Products/YearlyInfluences.jsx
    • components/root/Products/MxProSubscription.jsx
    Explore Product

    Light Background Button

    custom

    Used on light backgrounds (pink). Maintains consistent text color for better readability.

    Usage Count: 1
    Source: components/ui/product-purchase-button.tsx
    Used in:
    • components/root/Products/MxLibrary.jsx
    Explore Product

    Default Button

    custom

    Default button style used when no specific variant is specified. Includes purple border and text.

    Usage Count: 1
    Source: components/ui/product-purchase-button.tsx
    Used in:
    • components/ui/product-purchase-button.tsx
    Purchase Product