> For the complete documentation index, see [llms.txt](https://designsystem.dubai.ae/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://designsystem.dubai.ae/components/buttons/social-media-buttons.md).
# Social Media Buttons
## Overview
## Usage
### **When to Use This Component**
Social Media Login Buttons are ideal for providing users with a quick, familiar login option via their social media accounts. They are commonly used on login or signup pages, offering a seamless alternative to traditional email or password-based authentication.
### **How It Works**
A Social Media Login Button enables users to authenticate by connecting their social media account with a single click or tap. Each button displays the logo of the corresponding social media platform, ensuring instant recognition and a clear understanding of the login method.
## Anatomy
### Anatomy Options
**Brand Logo**: Positioned to the left of the button text, the brand logo (e.g., the Apple logo, Google, Facebook) represents the social media or service provider associated with the login. This logo provides quick brand recognition, helping users identify the service they’re using for authentication.
**Text**: The main label of the button, such as "Sign in with Apple," describes the action that will be taken when the button is clicked. This text clarifies the login method, making it easy for users to understand the purpose of the button.
## Dos and Don'ts
| Dos | Don'ts |
| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| Use official logos and colors of each social media platform for brand consistency. | Don’t alter the colors or logos, as this may reduce recognizability and violate brand guidelines. |
| Ensure clear labeling or tooltip if the icon alone may not be obvious to all users. | Don’t use social media login buttons as the only login option if users might not have those accounts. |
| Place Social Media Login Buttons in a prominent area on the login or signup page. | Don’t overcrowd the page with too many social media options; limit to popular platforms. |
| Provide a visual focus state for keyboard navigation to meet accessibility standards. | Don’t neglect accessibility—ensure buttons are usable with keyboard and screen readers. |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://designsystem.dubai.ae/components/buttons/social-media-buttons.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.