Lets users sign in using a social service.


To implement SocialButton component into your project you’ll need to add the import:

import SocialButton from "@kiwicom/orbit-components/lib/SocialButton";

After adding import into your project you can use it simply like:

<SocialButton>Hello World!</SocialButton>


Table below contains all types of the props available in SocialButton component.

ariaControlsstringId of the element the button controls.
ariaExpandedbooleanTells screen reader the controlled element from ariaControls is expanded
asComponentstring \| React.Element"button"The component used for the root node.
fullWidthbooleanfalseIf true, the SocialButton will grow up to the full width of its container.
childrenReact.NodeThe content of the SocialButton. See Functional specs
dataTeststringOptional prop for testing purposes.
idstringSet id for SocialButton
disabledbooleanfalseIf true, the SocialButton will be disabled.
externalbooleanfalseIf true, the SocialButton opens link in a new tab. See Functional specs
hrefstringThe URL of the link to open when SocialButton is clicked. See Functional specs
loadingbooleanfalseIf true, the loading glyph will be displayed.
onClickevent => void \| PromiseFunction for handling onClick event.
reffuncProp for forwarded ref of the SocialButton.
rolestringSpecifies the role of an element.
sizeenum"normal"The size of the SocialButton.
spaceAfterenumAdditional margin-bottom after component. See this docs
submitbooleanfalseIf true, the SocialButton will have type="submit" attribute, otherwise type="button".
tabIndexstring \| numberSpecifies the tab order of an element.
titlestringAdds aria-label.
typeenum"apple"The type of SocialButton.
widthstringThe width of the SocialButton. Can be any string - 100px, 20%.



Functional specs

  • When the external is specified, noopener value will be automatically added to attribute rel for security reason.
  • By passing the href prop into SocialButton, it will render into a element. If you pass asComponent prop it will override this logic.
  • If you want to use the asComponent prop then YourComponent should accept at least className. Otherwise it won’t be rendered with proper styling, e.g.:

    const YourComponent = props => <div {...props} />
    <SocialButton asComponent={YourComponent}>Title</SocialButton>

    If you specify the children of YourComponent component, it will override the children prop of SocialButton component, e.g.:

    const YourComponent = props => <div {...props}>YourComponent</div>;


A button is mainly used for indicating an action, submitting a data, opening a modal etc. If you want to use SocialButton for navigation consider using a <TextLink> for that.

  • Use ariaControls prop to add aria-controls attribute to establish the relationship between button and element which is controlled by it. aria-controls works only with a unique id of an element.

  • Use ariaExpands prop to add aria-expands to indicate screenreaders, that element controlled by button through ariaControls is expanded or not.

  • Use disabled prop to indicate users that button is inactive and they can’t interact with it.

  • Use role and tabIndex when you are rendering SocialButton to non-actionable HTML element as div or span. However, this should be done only in edge-cases as it is anti-pattern behavior.

  • Use title to add aria-label when you need to add extra informations to screen readers or there is no children presented to be used as label.