@ebay/ui-core-react
Version:
Skin components build off React
57 lines (44 loc) • 3.71 kB
Markdown
# EbaySectionNotice
## Demo
[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/notices-tips-ebay-section-notice--default-message-with-no-action)
## Import JS
```jsx harmony
import {
EbaySectionNotice,
EbayNoticeContent,
EbaySectionNoticeTitle,
EbaySectionNoticeFooter,
} from "@ebay/ui-core-react/ebay-section-notice";
```
### Import following styles from SKIN
```jsx harmony
import "@ebay/skin/section-notice";
```
## Use
```jsx harmony
<EbaySectionNotice status="confirmation" aria-label="Confirmation">
<EbayNoticeContent>
<EbaySectionNoticeTitle>Congratulations</EbaySectionNoticeTitle>
<p>
This successfully finished <a href="http://www.ebay.com">next page</a>
</p>
</EbayNoticeContent>
<EbaySectionNoticeFooter>
<EbayButton>Action</EbayButton>
</EbaySectionNoticeFooter>
</EbaySectionNotice>
```
## Attributes
| Name | Type | Stateful | Description | Default |
| ---------------------- | ----------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| `status` | String (`"general", "attention"`, `"confirmation"`, `"information"`, `"education"`) | No | Determines the style and type of notice to be displayed | `"general"` |
| `aria-label` | String | No | The description of the notice itself for screen readers. Check out [this issue](https://github.com/eBay/skin/issues/1001) for more context. | - |
| `aria-roledescription` | String | No | Adds role description attribute to the section notice | `"Notice"` |
| `children` | React Node | No | The content to be displayed within the notice. **Must have the EbayNoticeContent within the children!** | - |
| `educationIcon` | Icon | No | Icon of the educational banner | `"lightbulb24"` |
| `iconClass` | String | No | Class that will be added to the icon svg | - |
| `prominent` | Boolean | No | Sets the educational banner with a more prominent background | `false` |
## Callbacks
| Name | Required | Description | Arguments |
| ----------- | -------- | --------------------------- | --------- |
| `onDismiss` | No | Triggered on notice dismiss | (Event) |