Prism React Documentation

Banner

Banner component for displaying information and announcements with optional actions supporting various styles and icons.

Styles

Show code

Hide code

import { Banner, type BannerStyle } from '@mylighthouse/prism-react';

export default function BannerStyle(): React.ReactElement {
  return (
    <div className="flex flex-wrap gap-300">
      <Banner position="island" style={{ minWidth: '450px' }}>
        <Banner.Icon icon="circle-information-filled" />
        <Banner.Content>
          <Banner.ContentText>
            <Banner.Title>Info Banner</Banner.Title>
            <Banner.Message>
              This is an example banner message in info style.
            </Banner.Message>
          </Banner.ContentText>
        </Banner.Content>
      </Banner>

      <Banner
        bannerStyle="success"
        position="island"
        style={{ minWidth: '450px' }}
      >
        <Banner.Icon icon="circle-checkmark" />
        <Banner.Content>
          <Banner.ContentText>
            <Banner.Title>Success Banner</Banner.Title>
            <Banner.Message>
              This is an example banner message in success style.
            </Banner.Message>
          </Banner.ContentText>
        </Banner.Content>
      </Banner>

      <Banner
        bannerStyle="warning"
        position="island"
        style={{ minWidth: '450px' }}
      >
        <Banner.Icon icon="warning" />
        <Banner.Content>
          <Banner.ContentText>
            <Banner.Title>Warning Banner</Banner.Title>
            <Banner.Message>
              This is an example banner message in warning style.
            </Banner.Message>
          </Banner.ContentText>
        </Banner.Content>
      </Banner>

      <Banner
        bannerStyle="critical"
        position="island"
        style={{ minWidth: '450px' }}
      >
        <Banner.Icon icon="circle-error-filled" />
        <Banner.Content>
          <Banner.ContentText>
            <Banner.Title>Critical Banner</Banner.Title>
            <Banner.Message>
              This is an example banner message in critical style.
            </Banner.Message>
          </Banner.ContentText>
        </Banner.Content>
      </Banner>

      <Banner
        bannerStyle="intelligence"
        position="island"
        style={{ minWidth: '450px' }}
      >
        <Banner.Icon icon="artificial-intelligence" />
        <Banner.Content>
          <Banner.ContentText>
            <Banner.Title>Intelligence Banner</Banner.Title>
            <Banner.Message>
              This is an example banner message in intelligence style.
            </Banner.Message>
          </Banner.ContentText>
        </Banner.Content>
      </Banner>

      <Banner
        bannerStyle="brand"
        position="island"
        style={{ minWidth: '450px' }}
      >
        <Banner.Icon icon="notification" />
        <Banner.Content>
          <Banner.ContentText>
            <Banner.Title>Brand Banner</Banner.Title>
            <Banner.Message>
              This is an example banner message in brand style.
            </Banner.Message>
          </Banner.ContentText>
        </Banner.Content>
      </Banner>
    </div>
  );
}

Positions

Show code

Hide code

import {
  Banner,
  BANNER_POSITION,
  type BannerPosition,
} from '@mylighthouse/prism-react';

export default function BannerPosition(): React.ReactElement {
  return (
    <div className="flex flex-col gap-300">
      <Banner position={BANNER_POSITION.bottom}>
        <Banner.Icon icon="circle-information-filled" />
        <Banner.Content>
          <Banner.Message>
            This is an example banner message in bottom position.
          </Banner.Message>
        </Banner.Content>
      </Banner>

      <Banner position={BANNER_POSITION.island}>
        <Banner.Icon icon="circle-information-filled" />
        <Banner.Content>
          <Banner.Message>
            This is an example banner message in island position.
          </Banner.Message>
        </Banner.Content>
      </Banner>

      <Banner position={BANNER_POSITION.top}>
        <Banner.Icon icon="circle-information-filled" />
        <Banner.Content>
          <Banner.Message>
            This is an example banner message in top position.
          </Banner.Message>
        </Banner.Content>
      </Banner>
    </div>
  );
}

Actions

Show code

Hide code

import { Banner } from '@mylighthouse/prism-react';

export default function BannerActions(): React.ReactElement {
  return (
    <div className="flex flex-col gap-300">
      <Banner position="island">
        <Banner.Icon icon="circle-information-filled" />
        <Banner.Content>
          <Banner.ContentText>
            <Banner.Title>Primary Action Only</Banner.Title>
            <Banner.Message>
              This is an example banner message primary action.
            </Banner.Message>
          </Banner.ContentText>
          <Banner.Footer>
            <Banner.Button
              onClick={() => console.log('Primary Action Clicked')}
            >
              Primary Action
            </Banner.Button>
          </Banner.Footer>
        </Banner.Content>
      </Banner>

      <Banner position="island">
        <Banner.Icon icon="circle-information-filled" />
        <Banner.Content>
          <Banner.ContentText>
            <Banner.Title>Primary and Secondary Actions</Banner.Title>
            <Banner.Message>
              This is an example banner message primary and secondary actions
            </Banner.Message>
          </Banner.ContentText>
          <Banner.Footer>
            <Banner.Button
              onClick={() => console.log('Primary Action Clicked')}
            >
              Primary Action
            </Banner.Button>
            <Banner.Button
              buttonType="secondary"
              onClick={() => console.log('Secondary Action Clicked')}
            >
              Secondary Action
            </Banner.Button>
          </Banner.Footer>
        </Banner.Content>
      </Banner>

      <Banner isOneLine={true} position="island">
        <Banner.Icon icon="circle-information-filled" />
        <Banner.Content>
          <Banner.ContentText>
            <Banner.Message>
              This is an example banner message primary action and checkbox
            </Banner.Message>
          </Banner.ContentText>
          <Banner.Footer>
            <Banner.Button
              onClick={() => console.log('Primary Action Clicked')}
            >
              Primary Action
            </Banner.Button>
            <Banner.Checkbox
              checked={true}
              onChange={() => console.log('Checkbox Action Changed')}
            >
              Checkbox Action
            </Banner.Checkbox>
          </Banner.Footer>
        </Banner.Content>
      </Banner>

      <Banner position="island">
        <Banner.Icon icon="circle-information-filled" />
        <Banner.Content>
          <Banner.ContentText>
            <Banner.Title>Link URL</Banner.Title>
            <Banner.Message>
              This is an example banner message with a link URL.{' '}
              <Banner.Link href="https://mylighthouse.com">
                Link URL
              </Banner.Link>
            </Banner.Message>
          </Banner.ContentText>
        </Banner.Content>
        <Banner.CloseButton
          onClick={() => console.log('Close button clicked')}
        />
      </Banner>
    </div>
  );
}

API Reference

Banner

Name	Default	Type	Description
`bannerStyle`	--	`"critical" \| "warning" \| "success" \| "intelligence" \| "brand" \| "info"`	--
`isLoading`	--	`boolean`	--
`isOneLine`	--	`boolean`	--
`position`	--	`"top" \| "bottom" \| "island"`	--

Banner.Button

Name	Default	Type	Description
`onClick` *	--	`(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void`	--
`buttonType`	--	`"primary" \| "secondary" \| "critical" \| "critical-secondary" \| "warning" \| "success" \| "intelligence" \| "intelligence-secondary" \| "brand" \| "ghost" \| "unstyled"`	--
`disabled`	--	`boolean`	--
`iconAfter`	--	`IconName`	--
`iconBefore`	--	`IconName`	--

Banner.CloseButton

Name	Default	Type	Description
`onClick` *	--	`MouseEventHandler<HTMLButtonElement>`	--

Banner.Checkbox

Name	Default	Type	Description
`checked`	--	`boolean`	--
`disabled`	--	`boolean`	--
`onChange`	--	`ChangeEventHandler<HTMLInputElement>`	--

Banner.Content

No component-specific props

Banner.ContentText

No component-specific props

Banner.Footer

No component-specific props

Banner.Icon

Name	Default	Type	Description
`icon` *	--	`IconName`	--

Banner.Message

No component-specific props

Banner.Link

Name	Default	Type	Description
`href` *	--	`string`	--
`icon`	--	`boolean`	--

Banner.LinkButton

Name	Default	Type	Description
`onClick` *	--	`(e: MouseEvent<HTMLButtonElement, MouseEvent> \| KeyboardEvent<HTMLButtonElement>) => void`	--
`icon`	--	`boolean`	--

Banner.Title

No component-specific props