SocialButton

SocialButton

import SocialButton from "@kiwicom/orbit-components/lib/SocialButton";
<SocialButton>Hello World!</SocialButton>

Props

NameTypeDefaultDescription
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%.

enum

typesize
"apple""small"
"facebook""normal"
"google""large"
"twitter"
"email"

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.
  • const YourComponent = props => <div {...props} />
    <SocialButton asComponent={YourComponent}>Title</SocialButton>
    const YourComponent = props => <div {...props}>YourComponent</div>;

Accessibility