## Feature Examples ### Size - description:

Control toggle button size with size prop:

  • large is best for main actions in a composer.
  • medium (default) is for main composer toolbars.
  • small fits into smaller toolbars and UI elements like cards and widgets.
  • tiny is used in dense layouts.
    • - example: ```jsx ; ``` ### Label placement - description:

    Position the label with labelPlacement prop:

  • tooltip (default) - use it in dense layouts and for repetitive intuitive actions that don't need the exposed label, such as making text italic.
  • end saves vertical space.
  • bottom saves horizontal space.
    • - example: ```jsx ; ``` ### Skin - description:

    Control the appearance of a button with skin prop:

  • standard (default) is used it in all default cases.
  • inverted is used when selected actions need additional emphasis.
  • destructive is best for actions that might have a negative effect, for example, when the microphone is muted.
  • success is best for actions that have a positive effect, for example when camera is on or screen is shared.
  • dark is used on colored backgrounds.

    • Note: by design, different skins are only visible when toggle buttons are selected.

    - example: ```jsx ; ``` ### Shape - description:

    Control toggle button form with shape prop:

  • square (default) is best for composer toolbars and top bars.
  • round is built in composer sidebars.
  • pill is for main page layouts.
    • - example: ```jsx ; ``` ### Border - description:

    Turn on a toggle button border using border prop. It is off by default.

    Use it when the action needs additional emphasis.

    - example: ```jsx ; ``` ### State - description:

    Control toggle button states with these props:

  • selected is used when action is set to active.
  • disabled is used for unavailable actions, when toggle button cannot be clicked or selected.
    • - example: ```jsx ; ``` ## Developer Examples ### Custom HTML tag - description:

    Render toggle button as any given HTML tag with as prop. For example, it can be rendered as:

  • when attributes like href, target, etc., are needed.
  • when props like to, replace, etc. are needed.

    • All attributes will be passed to the rendered HTML tag.

    - example: ```jsx () => { const ReactRouterLink = (props) =>
    ; return ( alert('You have clicked on a button!')} labelValue="Native handleSidebarClick(id)} /> {selectedSidebar === 0 && renderSettingsPanel()} {selectedSidebar === 1 && renderCategoryPanel()} {selectedSidebar === 2 && renderTagPanel()} Composer content ); }; ``` ### Video stream - description:

    Use toggle buttons in control toolbars to enable/disable actions like screen sharing.

    - example: ```jsx () => { const renderToggleButton = (icon, skin, selected, labelValue) => ( {icon} ); return ( Video content {renderToggleButton(, '', false, 'Mute')} {renderToggleButton(, '', false, 'Stop video')} {renderToggleButton( , 'success', true, 'Share screen', )} {renderToggleButton(, 'destructive', true, 'Leave')} ); }; ``` ### Switch between states - description:

    Use toggle buttons as selectors that switch between two states.

    - example: ```jsx () => { const [selectedButtonToast, setSelectedButtonToast] = React.useState(false); const [selectedButtonPasta, setSelectedButtonPasta] = React.useState(false); const [selectedButtonPaella, setSelectedButtonPaella] = React.useState(false); return ( setSelectedButtonToast(!selectedButtonToast)} > {selectedButtonToast ? ( ) : ( )} Breakfast toast setSelectedButtonPasta(!selectedButtonPasta)} > {selectedButtonPasta ? ( ) : ( )} Lemon Ricotta Pasta setSelectedButtonPaella(!selectedButtonPaella)} > {selectedButtonPaella ? ( ) : ( )} Spanish Paella ); }; ```