## 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 tag"
labelPlacement="bottom"
>
);
};
```
## Common Use Case Examples
### Composer interface
- description: Toggle button is one of the main components used in Wix composers. Use it in: - `` for Undo and Redo actions. - `` as built-in button for navigation. - Any other toolbar to show actions or select states.
- example:
```jsx
() => {
const [selectedSidebar, setSelectedSidebar] = React.useState(0);
const [publishDate, setPublishDate] = React.useState();
const items = [
{
id: 0,
label: 'Settings',
icon: ,
},
{
id: 1,
label: 'Categories',
icon: ,
},
{
id: 2,
label: 'Tags',
icon: ,
},
];
const handleSidebarClick = (id) => {
setSelectedSidebar(id);
};
const handleCloseSidePanel = () => {
setSelectedSidebar(null);
};
const renderSettingsPanel = () => (
Settings side panel
);
const renderTagPanel = () => (
Tags side panel
);
const renderCategoryPanel = () => {
return (
Categories side panel
);
};
return (
|
|
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
);
};
```