
## Feature Examples


### Size
- description: <p>Control selector button <code>size</code> with size prop:</p><li><code>large</code> is best for calls to action that require more emphasis.</li><li><code>medium</code> is for layouts where other medium sized elements are used.</li><li><code>small</code> is default for panels. Provides more compact UI layout.</li><p></p><p></p>
- 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: <p>Use the <code>dark</code> skin variant in panels and contexts where the component should visually blend into the UI.</p><p>Apply the <code>standard</code> skin in contexts where the button needs to appear more actionable.</p>
- 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: <p>Add more context to actions with suffix icons:</p><li>Indicate that an action will open a popover or navigate users to another page with a <code>suffixIcon</code>.</li><li>Use suffix to indicate what type of action the button does. When needed <code>suffixIcon</code> can be removed.</li><p></p>
- 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: <p>To disable a button, use the <code>disabled</code> prop which indicates a button can't be selected.</p>
- example: 
```jsx 
<StorybookComponents.Stack
  flexDirection="column"
  width="240px">
 <SelectorButton
  disabled
  fullWidth
  size="medium"
  suffixIcon={<Icons.Add/>}
  > Disabled 
</SelectorButton>
  </StorybookComponents.Stack> 
```

### Text overflow
- description: <p>Use the <code>ellipsis</code> prop for overflow text. The full text will be displayed in a <code><Tooltip/> </code>when a user hovers over the button. Control the style of the tooltip using the <code>tooltipProps</code>.</p><p></p><p><em>Note</em>: Try to avoid lengthy action labels. CTA text should be short and clear – one to two words, or max three for specific use cases.</p>
- 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: <p>Use the <code>fullWidth</code> prop to fill the button to 100% of the parent container.</p>
- example: 
```jsx 
 <SelectorButton
  fullWidth
  ellipsis
  size="medium"
  suffixIcon={<Icons.Add/>}
  > Full width 
</SelectorButton>
```




    


## Common Use Case Examples


### Font picker in panels
- description: <p>Use the Selector Button in app settings panels to provide an entry point for opening a font picker.</p>
- 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={setValue}
                min={0}
                max={100}
                value={value}
                displayMarks={false}
              />
              <Input
                value={value}
                size="small"
                suffix={<Input.Affix>px</Input.Affix>}
                onChange={(e) => setValue(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(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: <p>Use the Selector Button in panels to provide an entry point for opening the link settings panel.</p>
- 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>;
```


