SocialButton

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>

Props

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

Name	Type	Default	Description
ariaControls	`string`		Id of the element the button controls.
ariaExpanded	`boolean`		Tells screen reader the controlled element from `ariaControls` is expanded.
asComponent	`string \\| React.Element`	`"button"`	The component used for the root node.
fullWidth	`boolean`	`false`	If `true`, the SocialButton will grow up to the full width of its container.
children	`React.Node`		The content of the SocialButton. See Functional specs
dataTest	`string`		Optional prop for testing purposes.
id	`string`		Set `id` for `SocialButton`.
disabled	`boolean`	`false`	If `true`, the SocialButton will be disabled.
external	`boolean`	`false`	If `true`, the SocialButton opens link in a new tab. See Functional specs
href	`string`		The URL of the link to open when SocialButton is clicked. See Functional specs
loading	`boolean`	`false`	If `true`, the loading glyph will be displayed.
onClick	`event => void \\| Promise`		Function for handling onClick event.
ref	`func`		Prop for forwarded ref of the SocialButton.
role	`string`		Specifies the role of an element.
size	`enum`	`"normal"`	The size of the SocialButton.
spaceAfter	`enum`		Additional `margin-bottom` after component.
submit	`boolean`	`false`	If `true`, the SocialButton will have `type="submit"` attribute, otherwise `type="button"`.
tabIndex	`string \\| number`		Specifies the tab order of an element.
title	`string`		Adds `aria-label`.
type	`enum`	`"apple"`	The type of SocialButton.
width	`string`		The width of the SocialButton. Can be any string - `100px`, `20%`.

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>;
```