ebay-section-notice

EbaySectionNotice

Demo

Storybook

Import JS

import {
    EbaySectionNotice,
    EbayNoticeContent,
    EbaySectionNoticeTitle,
    EbaySectionNoticeFooter,
} from '@ebay/ui-core-react/ebay-section-notice'

Import following styles from SKIN

import "@ebay/skin/section-notice";

Use

<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 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)