Banner

Banners show pressing and high-signal messages, such as system alerts. They are meant to be noticed and prompt users to take action.

Install
npm install @pluralsight/ps-design-system-banner
Import
import Banner from '@pluralsight/ps-design-system-banner'

Examples

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

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

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

Props

Banner

Name	Type	Description	Default
`color`	`blue \| green \| yellow \| red`	banner color (from Banner.colors)	`blue`
`onClick`	`Event => ()`	displays dismiss button, triggered on click

Banner.Button

Name	Type	Description
`children` Required	`string`	visual label
`href`	`string`
`children`	`Event => ()`