## Feature Examples

### Size
- description: Control selector button `size` with size prop: - `large` is best for calls to action that require more emphasis. - `medium` is for layouts where other medium sized elements are used. - `small` is default for panels. Provides more compact UI layout.
- example:
```jsx
<StorybookComponents.Stack width="240px" flexDirection="column">
  <SelectorButton fullWidth size="large" suffixIcon={<Icons.Link />}>
    {' '}
    Large
  </SelectorButton>
  <SelectorButton fullWidth size="medium" suffixIcon={<Icons.Link />}>
    {' '}
    Medium
  </SelectorButton>
  <SelectorButton fullWidth size="small" suffixIcon={<Icons.LinkSmall />}>
    {' '}
    Small
  </SelectorButton>
</StorybookComponents.Stack>;
```

### Skin
- description: Use the `dark` skin variant in panels and contexts where the component should visually blend into the UI. Apply the `standard` skin in contexts where the button needs to appear more actionable.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column" width="240px">
  <SelectorButton
    fullWidth
    size="medium"
    skin="dark"
    suffixIcon={<Icons.Text />}
  >
    {' '}
    Heading 1
  </SelectorButton>
  <SelectorButton
    fullWidth
    size="medium"
    skin="standard"
    suffixIcon={<Icons.Text />}
  >
    {' '}
    Heading 1
  </SelectorButton>
</StorybookComponents.Stack>;
```

### Suffix
- description: Add more context to actions with suffix icons: - Indicate that an action will open a popover or navigate users to another page with a `suffixIcon`. - Use suffix to indicate what type of action the button does. When needed `suffixIcon` can be removed.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column" width="240px">
  <SelectorButton fullWidth size="medium" suffixIcon={<Icons.Text />}>
    {' '}
    Heading 1
  </SelectorButton>
  <SelectorButton fullWidth size="medium" suffixIcon={<Icons.Link />}>
    {' '}
    Choose a link
  </SelectorButton>
  <SelectorButton fullWidth size="medium">
    {' '}
    Select item
  </SelectorButton>
</StorybookComponents.Stack>;
```

### Disabled
- description: To disable a button, use the `disabled` prop which indicates a button can't be selected.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column" width="240px">
  <SelectorButton disabled fullWidth size="medium" suffixIcon={<Icons.Add />}>
    {' '}
    Disabled
  </SelectorButton>
</StorybookComponents.Stack>;
```

### Text overflow
- description: Use the `ellipsis` prop for overflow text. The full text will be displayed in a `<Tooltip/> `when a user hovers over the button. Control the style of the tooltip using the `tooltipProps`. _Note_: Try to avoid lengthy action labels. CTA text should be short and clear – one to two words, or max three for specific use cases.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column" width="240px">
  <SelectorButton ellipsis fullWidth size="medium" suffixIcon={<Icons.Link />}>
    {' '}
    This is a very long label that does not fit inside a button
  </SelectorButton>
</StorybookComponents.Stack>;
```

### Full width
- description: Use the `fullWidth` prop to fill the button to 100% of the parent container.
- example:
```jsx
<SelectorButton fullWidth ellipsis size="medium" suffixIcon={<Icons.Add />}>
  {' '}
  Full width
</SelectorButton>;
```

## Common Use Case Examples

### Font picker in panels
- description: Use the Selector Button in app settings panels to provide an entry point for opening a font picker.
- example:
```jsx
() => {
  const [value, setValue] = React.useState(50);
  const [opacity, setOpacity] = React.useState(100);
  return (
    <SidePanel
      skin="floating"
      width="420px"
      onCloseButtonClick={() => {}}
      onHelpButtonClick={() => {}}
    >
      <SidePanel.Header title="Wix Comments" />
      <Box height="480px">
        <VerticalTabs size="small" activeTabId={2} onChange={() => {}}>
          <VerticalTabs.TabItem id={0}>Display</VerticalTabs.TabItem>
          <VerticalTabs.TabItem id={1}>Layout</VerticalTabs.TabItem>
          <VerticalTabs.TabItem id={2}>Design</VerticalTabs.TabItem>
          <VerticalTabs.TabItem id={3}>Text</VerticalTabs.TabItem>
        </VerticalTabs>
        <Divider direction="vertical" />
        <SidePanel.Content noPadding>
          <SidePanel.Field>
            <Button
              priority="secondary"
              size="tiny"
              prefixIcon={<Icons.ChevronLeft />}
            >
              Back
            </Button>
          </SidePanel.Field>
          <SidePanel.Field>
            <FieldSet legend="Text font and color" columns="auto 30px">
              <SelectorButton
                fullWidth
                size="small"
                suffixIcon={<Icons.TextSmall />}
              >
                {'Heading 1'}
              </SelectorButton>
              <FillPreview fill="#839788" aspectRatio={1} />
            </FieldSet>
          </SidePanel.Field>
          <SidePanel.Field>
            <FieldSet gap="small" legend="Border width" columns="auto 72px">
              <Slider
                onChange={(newValue) => setValue(Number(newValue))}
                min={0}
                max={100}
                value={value}
                displayMarks={false}
              />
              <Input
                value={value}
                size="small"
                suffix={<Input.Affix>px</Input.Affix>}
                onChange={(e) => setValue(Number(e.target.value))}
              />
            </FieldSet>
          </SidePanel.Field>
          <SidePanel.Section title="Divider">
            <SidePanel.Field>
              <FieldSet
                legend="Color"
                legendSize="small"
                legendPlacement="top"
                alignment="center"
                columns="30px auto 72px"
              >
                <FillPreview fill="#000000" aspectRatio={1} />
                <Box margin="0 8px">
                  <Slider
                    gradientColor="#000000"
                    min={0}
                    max={100}
                    displayMarks={false}
                    onChange={(value) => setOpacity(Number(value))}
                    value={opacity}
                  />
                </Box>
                <NumberInput
                  value={opacity}
                  min={0}
                  max={100}
                  onChange={(value) => setOpacity(value)}
                  suffix={<Input.Affix>%</Input.Affix>}
                  size="small"
                  hideStepper
                />
              </FieldSet>
            </SidePanel.Field>
          </SidePanel.Section>
        </SidePanel.Content>
      </Box>
    </SidePanel>
  );
};
```

### Panels with links
- description: Use the Selector Button in panels to provide an entry point for opening the link settings panel.
- example:
```jsx
<SidePanel onCloseButtonClick={() => {}} skin="floating" width="288px">
  <SidePanel.Header title="Button settings" />
  <SidePanel.Content noPadding>
    <SidePanel.Field>
      <FormField label="Text">
        <Input placeholder="Add button text" size="small" />
      </FormField>
    </SidePanel.Field>
    <SidePanel.Field>
      <FormField label="Name">
        <SelectorButton fullWidth size="small" suffixIcon={<Icons.LinkSmall />}>
          {'Choose a link '}
        </SelectorButton>
      </FormField>
    </SidePanel.Field>
  </SidePanel.Content>
</SidePanel>;
```