@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
74 lines (56 loc) • 5.32 kB
Markdown
# SocialButton
To implement SocialButton component into your project you'll need to add the import:
```jsx
import SocialButton from "@kiwicom/orbit-components/lib/SocialButton";
```
After adding import into your project you can use it simply like:
```jsx
<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](#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](#functional-specs) |
| href | `string` | | The URL of the link to open when SocialButton is clicked. [See Functional specs](#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`](#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`](#enum) | `"apple"` | The type of SocialButton. |
| width | `string` | | The width of the SocialButton. Can be any string - `100px`, `20%`. |
### enum
| type | size | spaceAfter |
| :----------- | :--------- | :----------- |
| `"apple"` | `"small"` | `"none"` |
| `"facebook"` | `"normal"` | `"smallest"` |
| `"google"` | `"large"` | `"small"` |
| `"X"` | | `"normal"` |
| `"email"` | | `"medium"` |
| | | `"large"` |
| | | `"largest"` |
## 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.:
```jsx
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.:
```jsx
const YourComponent = props => <div {...props}>YourComponent</div>;
```