## Feature Examples
### Structure
- description: Notification is a compound component that consists of 3 child elements: - `` (required) - `` - ``
- example:
```jsx
LabelAction;
```
### Skin
- description: Control the appearance of the notification with the `skin` prop. It supports 5 skins: - `standard` (default) - provides users with relevant information and actions. - `error` - use it to inform the user about application error that needs immediate action. - `success` - use it when a task has been performed successfully. - `warning` - use it to warn the user about application status that might affect the usage, but doesn't block the user. - `premium` - use it for premium upgrades only — packages that let accept payments, connect domain and have business email. [Read more about Premium patterns](https://docs.google.com/document/d/1mALfPW9BOZgAjaFpvor5la3WGhGkXIxpbkF2GFrapU0/edit).
- example:
```jsx
StandardErrorSuccessWarningPremium;
```
### Action
- description: Add a call to action to a notification by passing `` as a child component. Change its appearance with `type` prop. It supports 2 values: - `button` - use it to prompt users to take an action in order to continue - `textLink` - use it to display optional actions, such as 'Learn more'
- example:
```jsx
LabelButtonLabel
Text link
;
```
### Text overflow
- description: By default notification label is limited to a single line of text. Full text is revealed in a tooltip on hover over. Allow text to wrap to multiple lines by setting `ellipsis` prop value to `false`.
- example:
```jsx
This notification appears with extremely long text and it doesn't fit in a
single line. It requires to enable ellipsis feature or wrap the text in
multiple lines.
This notification appears with extremely long text and it doesn't fit in a
single line. It requires to enable ellipsis feature or wrap the text in
multiple lines.
;
```
### Placement
- description: Specify how notification should be displayed using the `type` prop. It supports 3 types: - `global` (default) - takes up space and pushes the content down. On page scroll, it scrolls together with content. - `local` will not take up space and will be displayed on top of the content. On page scroll, it scrolls together with content. - `sticky` - will not take up space and will be displayed on top of the whole page. On page scroll, it keeps its position fixed at the top of a screen.
- example:
```jsx
() => {
const [show, setShow] = React.useState(false);
const [type, setType] = React.useState(undefined);
return (
Label
);
};
```
### Timeout
- description: Hide the notification after a specified amount of time with `autoHideTimeout` prop. Time is specified in milliseconds. When set it's recommended to keep it visible for at least for 7 seconds.
- example:
```jsx
() => {
const [show, setShow] = React.useState(false);
return (
Label
);
};
```
## Developer Examples
### Controlled display
- description: Control whether notification is visible or not with `show` prop.
- example:
```jsx
() => {
const [show, setShow] = React.useState(false);
return (
setShow(false)} skin="error" show={show}>
This notification appears with extremely long text and it doesn't
fit in a single line. It requires to enable ellipsis feature or wrap
the text in multiple lines.
console.log('Clicked!')}>
button
The Life and Strange Surprizing Adventures of Robinson Crusoe, Of
York, Mariner: Who lived Eight and Twenty Years, all alone in an
un-inhabited Island on the Coast of America, near the Mouth of the
Great River of Oroonoque; Having been cast on Shore by Shipwreck,
wherein all the Men perished but himself. With An Account how he was
at last as strangely deliver'd by Pyrates
);
};
```
## Common Use Case Examples
### Application status
- description: Use notification to update users about the application status change after user's performed action. For example, "save" button clicked when a required field was left empty.
- example:
```jsx
<>
Name your plan to continue.
}
breadcrumbs={
{}}
/>
}
showBackButton
onBackClicked={() => {}}
title="Basic Plan"
/>
Preview area
;
```