## Feature Examples

### Text
- description: Give users additional explanation by using `text` prop to show label under the button.
- example:
```jsx
<StorybookComponents.Stack>
  <SocialButton text="Share on Facebook" icon="facebook" />
  <SocialButton icon="facebook" />
</StorybookComponents.Stack>;
```

### Icon
- description: Theme component to match social networks by using the icon prop with one of the following themes. - `facebook` - `twitter` - `linkedIn` - `instagram` - `pinterest` - `youtube` - `xcorp`
- example:
```jsx
<StorybookComponents.Stack>
  <SocialButton icon="facebook" />
  <SocialButton icon="twitter" />
  <SocialButton icon="linkedin" />
  <SocialButton icon="instagram" />
  <SocialButton icon="pinterest" />
  <SocialButton icon="youtube" />
  <SocialButton icon="xcorp" />
</StorybookComponents.Stack>;
```

### Disabled
- description: Indicate that action is available but can not be performed at the moment by using `disabled` property.
- example:
```jsx
<StorybookComponents.Stack>
  <SocialButton icon="facebook" disabled />
  <SocialButton icon="twitter" disabled />
  <SocialButton icon="linkedin" disabled />
  <SocialButton icon="instagram" disabled />
  <SocialButton icon="pinterest" disabled />
  <SocialButton icon="youtube" disabled />
  <SocialButton icon="xcorp" disabled />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Sharing
- description: Use [`<AnnouncementModalLayout/>`](#/component/announcementmodallayout) to give enough open space to promote social sharing with [`<SocialButton/>`](#/component/socialbutton) actions, that are larger and more prominent than regular buttons.
- example:
```jsx
<AnnouncementModalLayout
  title="Share Your Campaign"
  onCloseButtonClick={() => {}}
>
  <Box direction="vertical" gap="40px" margin="3px">
    <Text>
      Give more people interacting with your campaign by sharing it on your
      social networks.
    </Text>
    <Box align="space-between" verticalAlign="middle">
      <SocialButton text="Share on Facebook" icon="facebook" />
      <SocialButton text="Share on Twitter" icon="twitter" />
      <SocialButton text="Share on Pinterest" icon="pinterest" />
    </Box>
    <Box>
      <Divider />
    </Box>
    <FormField label="Campaign URL">
      <Input
        suffix={
          <Box verticalAlign="middle" marginRight="SP1">
            <TextButton size="small" prefixIcon={<Icons.DuplicateSmall />}>
              {'Copy'}
            </TextButton>
          </Box>
        }
      />
    </FormField>
  </Box>
</AnnouncementModalLayout>;
```