Banner

Examples

Color

Banners come in 4 colors. Banner colors change based on message displayed.

This is a blue message
This is a green message
This is a yellow message
This is a red message
import Banner from '@pluralsight/ps-design-system-banner'
import React from 'react'
function Example() {
return (
<>
<Banner color={Banner.colors.blue}>This is a blue message</Banner>
<Banner color={Banner.colors.green}>This is a green message</Banner>
<Banner color={Banner.colors.yellow}>This is a yellow message</Banner>
<Banner color={Banner.colors.red}>This is a red message</Banner>
</>
)
}
export default Example

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-banner
  • Import
    import Banner from '@pluralsight/ps-design-system-banner'
Name
Type
Description
Default
color
blue | green | yellow | red
banner color (from Banner.colors)blue
onClickEvent => ()displays dismiss button, triggered on click

Banner.Button

Name
Type
Description
Default
children
Required
stringvisual label
hrefstring
childrenEvent => ()