## 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 } > Large } > Medium } > Small ; ``` ### 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.

    • - example: ```jsx } > Heading 1 } > Choose a link ``` ### Disabled - description:

    To disable a button, use the disabled prop which indicates a button can't be selected.

    - example: ```jsx } > Disabled ``` ### Text overflow - description:

    Use the ellipsis prop for overflow text. The full text will be displayed in a 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 } > This is a very long label that does not fit inside a button ``` ### Full width - description:

    Use the fullWidth prop to fill the button to 100% of the parent container.

    - example: ```jsx } > Full width ``` ## 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 ( {}}> Display Layout Design Text
    }> {'Heading 1'}
    px} onChange={(e) => setValue(e.target.value)} />
    setOpacity(value)} value={opacity} /> setOpacity(value)} suffix={%} size="small" hideStepper />
    ); }; ``` ### Panels with links - description:

    Use the Selector Button in panels to provide an entry point for opening the link settings panel.

    - example: ```jsx {}} skin="floating" width="288px"> }> {'Choose a link '} ; ```