Service Button

Create branded buttons for connecting to external services and platforms. While OAuth authentication is one common use case, service buttons are perfect for any scenario requiring visual brand recognition including integrations, payments, downloads, and third-party connections.

OAuth Authentication

One of the most common use cases - social login buttons with proper brand colors and styling:

<x-andach-service-button url="/"
                         class="bg-[#EA4335] dark:bg-[#A50E0E]"
                         class:separator="border-[#d62d20]"
                         icon="<i class='fa-brands fa-google'></i>">
    Login with Google
</x-andach-service-button>

<x-andach-service-button url="/"
                         class="bg-[#1DA1F2] dark:bg-[#14171A]"
                         class:separator="border-[#AAB8C2]"
                         icon="<i class='fa-brands fa-x-twitter'></i>">
    Login with X
</x-andach-service-button>

Customisation

Attribute Name	Type	Default Value	Description
icon	string	null	HTML string for the icon display (FontAwesome, images, SVGs, etc.).
url	string	null	The URL or route for the button link.
background	string	null	Controls the background styling of the button.
border	string	null	Adds border styling for enhanced visual separation.
divide	string	null	Adds divider lines between button sections.
hollow	string	null	Creates a hollow/outline style with transparent background.
ring	string	null	Adds a ring/outline effect for additional emphasis.
rounded	string	null	Controls the border radius of the button corners.
shadow	string	null	Adds drop shadow effects for depth and elevation.
size	string	null	Controls the overall size and spacing. Options: 'xs', 'sm', 'base', 'lg', 'xl'.
variant	string	null	Color scheme variant. Options: 'default', 'dark', 'light', 'brand', 'primary', 'secondary', 'success', 'warning', 'danger'.

Service Integrations

Connect with external services, integrations, or third-party platforms beyond authentication:

Connect to Slack

Join Discord Server

Pay with PayPal

Pay with Stripe

<x-andach-service-button url="#"
                         class="bg-[#FF5722] text-white"
                         class:separator="border-[#D84315]"
                         icon="<i class='fa-brands fa-slack'></i>">
    Connect to Slack
</x-andach-service-button>

<x-andach-service-button url="#"
                         class="bg-[#0066CC] text-white"
                         class:separator="border-[#004499]"
                         icon="<i class='fa-brands fa-paypal'></i>">
    Pay with PayPal
</x-andach-service-button>

Download & Export Actions

Perfect for file downloads, exports, or platform-specific actions that maintain brand consistency:

Download from GitHub

Export to Excel

Download PDF

<x-andach-service-button url="#"
                         class="bg-[#2F3349] text-white"
                         class:separator="border-[#1F2237]"
                         icon="<i class='fa-brands fa-github'></i>">
    Download from GitHub
</x-andach-service-button>

<x-andach-service-button url="#"
                         class="bg-[#217346] text-white"
                         class:separator="border-[#1B5E3F]"
                         icon="<i class='fa-solid fa-file-excel'></i>">
    Export to Excel
</x-andach-service-button>

Variant Styling

Use built-in variants for consistent styling without custom colors:

Share Content

Confirm Action

Proceed with Caution

Delete Item

<x-andach-service-button url="#" variant="primary"
                         icon="<i class='fa-solid fa-share'></i>">
    Share Content
</x-andach-service-button>

<x-andach-service-button url="#" variant="success"
                         icon="<i class='fa-solid fa-check'></i>">
    Confirm Action
</x-andach-service-button>

Size and Styling Options

Control the appearance with size and styling attributes:

Small Settings

Large Launch Button

Button with Ring

<x-andach-service-button url="#" size="sm" variant="secondary"
                         icon="<i class='fa-solid fa-cog'></i>">
    Small Settings
</x-andach-service-button>

<x-andach-service-button url="#" size="lg" variant="brand" :shadow="true"
                         icon="<i class='fa-solid fa-rocket'></i>">
    Large Launch Button
</x-andach-service-button>