Building Blocks

/

Alert Banner

Use alert banners to communicate important information to users.

Kits Used

Show Code

Fullscreen

Copy to Clipboard

import React from "react"; import { Body, Card, Flex, Icon, Title } from "playbook-ui"; const AlertBanner = (props) => { return ( <> <Flex orientation="column" gap="md"> {/* Card #1 - Success */} <Card highlight={{ color: 'success', position: 'side' }} padding="xs" paddingRight="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" paddingTop="xs" > <Icon color="success" icon="check-circle" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Great Job!" /> <Body text="This is body text explaining what was so great!" /> </Flex> </Flex> </Card> {/* Card #2 - Error */} <Card highlight={{ color: 'error', position: 'side' }} padding="xs" paddingRight="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" paddingTop="xs" > <Icon color="error" icon="exclamation-circle" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Oh No!" /> <Body text="This is body text explaining what went wrong!" /> </Flex> </Flex> </Card> {/* Card #3 - Warning */} <Card highlight={{ color: 'warning', position: 'side' }} padding="xs" paddingRight="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" paddingTop="xs" > <Icon color="warning" icon="exclamation-triangle" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Watch Out!" /> <Body text="This is body text explaining what to watch out for!" /> </Flex> </Flex> </Card> {/* Card #4 - Neutral */} <Card highlight={{ color: 'neutral', position: 'side' }} padding="xs" paddingRight="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" paddingTop="xs" > <Icon color="neutral" icon="info-circle" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Some information" /> <Body text="This is body text explaining something for you" /> </Flex> </Flex> </Card> {/* Card #5 - Info: Showing Long Text with No Width Restriction */} <Card highlight={{ color: 'info', position: 'side' }} padding="xs" paddingRight="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" paddingTop="xs" > <Icon color="info" icon="info-circle" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Some information!" /> <Body text="This is body text explaining something for you that is long but has no width restriction so will span the width of the page!" /> </Flex> </Flex> </Card> {/* Card #6 - Primary: Showing Long Text with Width Restriction */} <Card highlight={{ color: 'primary', position: 'side' }} padding="xs" paddingRight="sm" width="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" paddingTop="xs" > <Icon color="primary" icon="info-circle" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Some information!" /> <Body text="This is body text explaining something for you that is long and wraps to the next line because the card has a width restriction in place" /> </Flex> </Flex> </Card> {/* End of example stop here if copy+pasting */} </Flex> </> ); } export default AlertBanner;

import React from "react";
import { Body, Card, Flex, Icon, Title } from "playbook-ui";

const AlertBanner = (props) => {

  return (
    <>
    <Flex orientation="column" gap="md">
      {/* Card #1 - Success */}
      <Card
          highlight={{ color: 'success', position: 'side' }}
          padding="xs"
          paddingRight="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
              paddingTop="xs"
          >
            <Icon
                color="success"
                icon="check-circle"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Great Job!"
            />
            <Body text="This is body text explaining what was so great!" />
          </Flex>
        </Flex>
      </Card>
      {/* Card #2 - Error */}
      <Card
          highlight={{ color: 'error', position: 'side' }}
          padding="xs"
          paddingRight="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
              paddingTop="xs"
          >
            <Icon
                color="error"
                icon="exclamation-circle"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Oh No!"
            />
            <Body text="This is body text explaining what went wrong!" />
          </Flex>
        </Flex>
      </Card>
      {/* Card #3 - Warning */}
      <Card
          highlight={{ color: 'warning', position: 'side' }}
          padding="xs"
          paddingRight="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
              paddingTop="xs"
          >
            <Icon
                color="warning"
                icon="exclamation-triangle"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Watch Out!"
            />
            <Body text="This is body text explaining what to watch out for!" />
          </Flex>
        </Flex>
      </Card>
      {/* Card #4 - Neutral */}
      <Card
          highlight={{ color: 'neutral', position: 'side' }}
          padding="xs"
          paddingRight="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
              paddingTop="xs"
          >
            <Icon
                color="neutral"
                icon="info-circle"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Some information"
            />
            <Body text="This is body text explaining something for you" />
          </Flex>
        </Flex>
      </Card>
      {/* Card #5 - Info: Showing Long Text with No Width Restriction */}
      <Card
          highlight={{ color: 'info', position: 'side' }}
          padding="xs"
          paddingRight="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
              paddingTop="xs"
          >
            <Icon
                color="info"
                icon="info-circle"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Some information!"
            />
            <Body text="This is body text explaining something for you that is long but has no width restriction so will span the width of the page!" />
          </Flex>
        </Flex>
      </Card>
      {/* Card #6 - Primary: Showing Long Text with Width Restriction */}
      <Card
          highlight={{ color: 'primary', position: 'side' }}
          padding="xs"
          paddingRight="sm"
          width="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
              paddingTop="xs"
          >
            <Icon
                color="primary"
                icon="info-circle"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Some information!"
            />
            <Body text="This is body text explaining something for you that is long and wraps to the next line because the card has a width restriction in place" />
          </Flex>
        </Flex>
      </Card>
      {/* End of example stop here if copy+pasting */}
    </Flex>
    </>
  );
}

export default AlertBanner;

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat