---
title: Social identity provider button and badge properties
description: You can configure buttons and badges for each social identity provider, using the admin UI or by editing the associated identityProvider-name.json file. The admin UI displays examples during social identity provider configuration.
component: pingidm
version: 7.5
page_id: pingidm:self-service-reference:social-providers/appendix-social-badges
canonical_url: https://docs.pingidentity.com/pingidm/7.5/self-service-reference/social-providers/appendix-social-badges.html
keywords: ["Configuration", "Authentication", "Social Authentication", "Self-Service", "User Self-Service", "Social Identity"]
---

# Social identity provider button and badge properties

|   |                                                                                                                                                                                                                          |
| - | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|   | Social authentication is deprecated and will be removed in a future release of IDM. For more information, refer to [Deprecation](../../release-notes/deprecated-functionality.html#deprecated-standalone-socialid-auth). |

You can configure buttons and badges for each social identity provider, using the admin UI or by editing the associated `identityProvider-name.json` file. The admin UI displays examples during social identity provider configuration.

Badges appear in the admin UI under Configure > Social ID Providers , and in the End User UI under My Account > Sign-in & Security > Social Sign-in.

Buttons appear in the IDM login screens, and when you select Register from the End User UI login screen.

| Example Button                               | Example Badges                             |
| -------------------------------------------- | ------------------------------------------ |
| ![socialButton](../_images/socialButton.png) | ![socialBadge](../_images/socialBadge.png) |

How IDM displays buttons and badges changes based on how many social identity providers are enabled:

* For up to three social identity providers, IDM displays large buttons, with the text Register with Provider.

* For four or more social identity providers, IDM displays smaller buttons with icons.

  |   |                                                                                    |
  | - | ---------------------------------------------------------------------------------- |
  |   | For seven or more social identity providers, horizontal scrolling may be required. |

**Properties for Social Identity Provider Buttons and Badges**

| Property (UI)          | Property (JSON file)     | Description                                                                                                                                     |
| ---------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| Badge background color | `iconBackground`         | Color for the social identity provider icon.                                                                                                    |
| Badge icon classname   | `iconClass`              | Name of the icon class. Can be a Font Awesome name like `fa-google`.                                                                            |
| Badge font color       | `iconFontColor`          | Color for the social identity provider icon font.                                                                                               |
| Button image path      | `buttonImage`            | Looks in `openidm/ui/admin/extension` and then `openidm/ui/admin/default` for an image file. Takes precedence over the *Button icon classname*. |
| Button icon classname  | `buttonClass`            | Name for the social identity provider class. Can be a Font Awesome name like `fa-yahoo`.                                                        |
| Button display name    | `buttonDisplayName`      | Name to display on large buttons.                                                                                                               |
| Button styles          | `buttonCustomStyle`      | Custom styles, such as `background-color: #7B0099; border-color: #7B0099; color:white;`.                                                        |
| Button hover styles    | `buttonCustomStyleHover` | Custom styles for the hover state of a button, such as `background-color: #7B0099; border-color: #7B0099; color: white;`.                       |