SignOutButton API
API reference docs for the React SignOutButton component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { SignOutButton } from '@toolpad/core/Account';| Name | Type | Description |
|---|---|---|
| children | node | The content of the component. |
The component cannot hold a ref.
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
| Class name | Rule name | Description |
|---|---|---|
| . | colorError | Styles applied to the root element if color="error". |
| . | colorInfo | Styles applied to the root element if color="info". |
| . | colorInherit | Styles applied to the root element if color="inherit". |
| . | colorPrimary | Styles applied to the root element if color="primary". |
| . | colorSecondary | Styles applied to the root element if color="secondary". |
| . | colorSuccess | Styles applied to the root element if color="success". |
| . | colorWarning | Styles applied to the root element if color="warning". |
| . | contained | Styles applied to the root element if variant="contained". |
| . | containedError | Styles applied to the root element if variant="contained" and color="error". |
| . | containedInfo | Styles applied to the root element if variant="contained" and color="info". |
| . | containedInherit | Styles applied to the root element if variant="contained" and color="inherit". |
| . | containedPrimary | Styles applied to the root element if variant="contained" and color="primary". |
| . | containedSecondary | Styles applied to the root element if variant="contained" and color="secondary". |
| . | containedSizeLarge | Styles applied to the root element if size="large" and variant="contained". |
| . | containedSizeMedium | Styles applied to the root element if size="medium" and variant="contained". |
| . | containedSizeSmall | Styles applied to the root element if size="small" and variant="contained". |
| . | containedSuccess | Styles applied to the root element if variant="contained" and color="success". |
| . | containedWarning | Styles applied to the root element if variant="contained" and color="warning". |
| . | disabled | State class applied to the root element if disabled={true}. |
| . | disableElevation | Styles applied to the root element if disableElevation={true}. |
| . | endIcon | Styles applied to the endIcon element if supplied. |
| . | focusVisible | State class applied to the ButtonBase root element if the button is keyboard focused. |
| . | fullWidth | Styles applied to the root element if fullWidth={true}. |
| . | icon | Styles applied to the icon element if supplied |
| . | iconSizeLarge | Styles applied to the icon element if supplied and size="large". |
| . | iconSizeMedium | Styles applied to the icon element if supplied and size="medium". |
| . | iconSizeSmall | Styles applied to the icon element if supplied and size="small". |
| . | loading | Styles applied to the root element if loading={true}. |
| . | loadingIconPlaceholder | Styles applied to the loadingIconPlaceholder element. |
| . | loadingIndicator | Styles applied to the loadingIndicator element. |
| . | loadingPositionCenter | Styles applied to the root element if loadingPosition="center". |
| . | loadingPositionEnd | Styles applied to the root element if loadingPosition="end". |
| . | loadingPositionStart | Styles applied to the root element if loadingPosition="start". |
| . | loadingWrapper | Styles applied to the loadingWrapper element. |
| . | outlined | Styles applied to the root element if variant="outlined". |
| . | outlinedError | Styles applied to the root element if variant="outlined" and color="error". |
| . | outlinedInfo | Styles applied to the root element if variant="outlined" and color="info". |
| . | outlinedInherit | Styles applied to the root element if variant="outlined" and color="inherit". |
| . | outlinedPrimary | Styles applied to the root element if variant="outlined" and color="primary". |
| . | outlinedSecondary | Styles applied to the root element if variant="outlined" and color="secondary". |
| . | outlinedSizeLarge | Styles applied to the root element if size="large" and variant="outlined". |
| . | outlinedSizeMedium | Styles applied to the root element if size="medium" and variant="outlined". |
| . | outlinedSizeSmall | Styles applied to the root element if size="small" and variant="outlined". |
| . | outlinedSuccess | Styles applied to the root element if variant="outlined" and color="success". |
| . | outlinedWarning | Styles applied to the root element if variant="outlined" and color="warning". |
| . | root | Styles applied to the root element. |
| . | sizeLarge | Styles applied to the root element if size="large". |
| . | sizeMedium | Styles applied to the root element if size="medium". |
| . | sizeSmall | Styles applied to the root element if size="small". |
| . | startIcon | Styles applied to the startIcon element if supplied. |
| . | text | Styles applied to the root element if variant="text". |
| . | textError | Styles applied to the root element if variant="text" and color="error". |
| . | textInfo | Styles applied to the root element if variant="text" and color="info". |
| . | textInherit | Styles applied to the root element if variant="text" and color="inherit". |
| . | textPrimary | Styles applied to the root element if variant="text" and color="primary". |
| . | textSecondary | Styles applied to the root element if variant="text" and color="secondary". |
| . | textSizeLarge | Styles applied to the root element if size="large" and variant="text". |
| . | textSizeMedium | Styles applied to the root element if size="medium" and variant="text". |
| . | textSizeSmall | Styles applied to the root element if size="small" and variant="text". |
| . | textSuccess | Styles applied to the root element if variant="text" and color="success". |
| . | textWarning | Styles applied to the root element if variant="text" and color="warning". |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.