Skip to content

Notification

junminahn edited this page Dec 2, 2020 · 1 revision

Notification

A notification to display information to the user.

Group Prop Type Description
Sizes mini boolean Sizing options intended to modify font-size and padding
tiny
small
medium
large
big
huge
Proportion full-height (non-themable) boolean Component takes 100% of parent height
full-width (non-themable) Component takes 100% of parent width
Closable closable boolean Includes a clickable icon to close message
Variants primary boolean Styling options
secondary
info
warning
danger
success
hint

Accessibility

  • Consider alert role when implementing, and whether we should apply it to this component or maybe split the component into a custom alert and message.

Expected behaviors in progressive enhancements

HTML

  • it displays the contents of the message

HTML + CSS

  • it applies the theme styles and allows for closing the element.

HTML + CSS + JS

  • It is removed from page when closed.

Clone this wiki locally