UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

57 lines (44 loc) 3.71 kB
# 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) |