|
| 1 | +--- |
| 2 | +filename: /packages/material-ui-lab/src/Alert/Alert.js |
| 3 | +--- |
| 4 | + |
| 5 | +<!--- This documentation is automatically generated, do not try to edit it. --> |
| 6 | + |
| 7 | +# Alert API |
| 8 | + |
| 9 | +<p class="description">The API documentation of the Alert React component. Learn more about the props and the CSS customization points.</p> |
| 10 | + |
| 11 | +## Import |
| 12 | + |
| 13 | +```js |
| 14 | +import Alert from '@material-ui/lab/Alert'; |
| 15 | +// or |
| 16 | +import { Alert } from '@material-ui/lab'; |
| 17 | +``` |
| 18 | + |
| 19 | +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +## Props |
| 24 | + |
| 25 | +| Name | Type | Default | Description | |
| 26 | +|:-----|:-----|:--------|:------------| |
| 27 | +| <span class="prop-name">action</span> | <span class="prop-type">node</span> | | The action to display. It renders after the message, at the end of the alert. | |
| 28 | +| <span class="prop-name">children</span> | <span class="prop-type">node</span> | | The content of the component. | |
| 29 | +| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | |
| 30 | +| <span class="prop-name">closeText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Close'</span> | Override the default label for the *close popup* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). | |
| 31 | +| <span class="prop-name">color</span> | <span class="prop-type">'error'<br>| 'info'<br>| 'success'<br>| 'warning'</span> | | The main color for the alert. Unless provided, the value is taken from the `severity` prop. | |
| 32 | +| <span class="prop-name">icon</span> | <span class="prop-type">node</span> | | Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the `severity` prop. | |
| 33 | +| <span class="prop-name">iconMapping</span> | <span class="prop-type">{ error?: node, info?: node, success?: node, warning?: node }</span> | <span class="prop-default">{ success: <SuccessOutlinedIcon fontSize="inherit" />, warning: <ReportProblemOutlinedIcon fontSize="inherit" />, error: <ErrorOutlineIcon fontSize="inherit" />, info: <InfoOutlinedIcon fontSize="inherit" />,}</span> | The component maps the `severity` prop to a range of different icons, for instance success to `<SuccessOutlined>`. If you wish to change this mapping, you can provide your own. Alternatively, you can use the `icon` prop to override the icon displayed. | |
| 34 | +| <span class="prop-name">onClose</span> | <span class="prop-type">func</span> | | Callback fired when the component requests to be closed. When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. | |
| 35 | +| <span class="prop-name">role</span> | <span class="prop-type">string</span> | <span class="prop-default">'alert'</span> | The ARIA role attribute of the element. | |
| 36 | +| <span class="prop-name">severity</span> | <span class="prop-type">'error'<br>| 'info'<br>| 'success'<br>| 'warning'</span> | <span class="prop-default">'success'</span> | The severity of the alert. This defines the color and icon used. | |
| 37 | +| <span class="prop-name">variant</span> | <span class="prop-type">'filled'<br>| 'outlined'<br>| 'standard'</span> | <span class="prop-default">'standard'</span> | The variant to use. | |
| 38 | + |
| 39 | +The `ref` is forwarded to the root element. |
| 40 | + |
| 41 | +Any other props supplied will be provided to the root element ([Paper](/api/paper/)). |
| 42 | + |
| 43 | +## CSS |
| 44 | + |
| 45 | +- Style sheet name: `MuiAlert`. |
| 46 | +- Style sheet details: |
| 47 | + |
| 48 | +| Rule name | Global class | Description | |
| 49 | +|:-----|:-------------|:------------| |
| 50 | +| <span class="prop-name">root</span> | <span class="prop-name">.MuiAlert-root</span> | Styles applied to the root element. |
| 51 | +| <span class="prop-name">standardSuccess</span> | <span class="prop-name">.MuiAlert-standardSuccess</span> | Styles applied to the root element if `variant="standard"` and `color="success"`. |
| 52 | +| <span class="prop-name">standardInfo</span> | <span class="prop-name">.MuiAlert-standardInfo</span> | Styles applied to the root element if `variant="standard"` and `color="info"`. |
| 53 | +| <span class="prop-name">standardWarning</span> | <span class="prop-name">.MuiAlert-standardWarning</span> | Styles applied to the root element if `variant="standard"` and `color="warning"`. |
| 54 | +| <span class="prop-name">standardError</span> | <span class="prop-name">.MuiAlert-standardError</span> | Styles applied to the root element if `variant="standard"` and `color="error"`. |
| 55 | +| <span class="prop-name">outlinedSuccess</span> | <span class="prop-name">.MuiAlert-outlinedSuccess</span> | Styles applied to the root element if `variant="outlined"` and `color="success"`. |
| 56 | +| <span class="prop-name">outlinedInfo</span> | <span class="prop-name">.MuiAlert-outlinedInfo</span> | Styles applied to the root element if `variant="outlined"` and `color="info"`. |
| 57 | +| <span class="prop-name">outlinedWarning</span> | <span class="prop-name">.MuiAlert-outlinedWarning</span> | Styles applied to the root element if `variant="outlined"` and `color="warning"`. |
| 58 | +| <span class="prop-name">outlinedError</span> | <span class="prop-name">.MuiAlert-outlinedError</span> | Styles applied to the root element if `variant="outlined"` and `color="error"`. |
| 59 | +| <span class="prop-name">filledSuccess</span> | <span class="prop-name">.MuiAlert-filledSuccess</span> | Styles applied to the root element if `variant="filled"` and `color="success"`. |
| 60 | +| <span class="prop-name">filledInfo</span> | <span class="prop-name">.MuiAlert-filledInfo</span> | Styles applied to the root element if `variant="filled"` and `color="info"`. |
| 61 | +| <span class="prop-name">filledWarning</span> | <span class="prop-name">.MuiAlert-filledWarning</span> | Styles applied to the root element if `variant="filled"` and `color="warning"`. |
| 62 | +| <span class="prop-name">filledError</span> | <span class="prop-name">.MuiAlert-filledError</span> | Styles applied to the root element if `variant="filled"` and `color="error"`. |
| 63 | +| <span class="prop-name">icon</span> | <span class="prop-name">.MuiAlert-icon</span> | Styles applied to the icon wrapper element. |
| 64 | +| <span class="prop-name">message</span> | <span class="prop-name">.MuiAlert-message</span> | Styles applied to the message wrapper element. |
| 65 | +| <span class="prop-name">action</span> | <span class="prop-name">.MuiAlert-action</span> | Styles applied to the action wrapper element if `action` is provided. |
| 66 | + |
| 67 | +You can override the style of the component thanks to one of these customization points: |
| 68 | + |
| 69 | +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). |
| 70 | +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). |
| 71 | +- With a theme and an [`overrides` property](/customization/globals/#css). |
| 72 | + |
| 73 | +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/Alert/Alert.js) for more detail. |
| 74 | + |
| 75 | +## Inheritance |
| 76 | + |
| 77 | +The props of the [Paper](/api/paper/) component are also available. |
| 78 | +You can take advantage of this behavior to [target nested components](/guides/api/#spread). |
| 79 | + |
| 80 | +## Demos |
| 81 | + |
| 82 | +- [Alert](/components/alert/) |
| 83 | + |
0 commit comments