Banner

Como utilizar

import { Banner, Text, Button } from '@superlogica/design-system'

() => {
  const [bannerIsOpened, setBannerIsOpened] = useState(true)

  return (
    <>
      <Banner
        show={bannerIsOpened}
        status="info"
        title="Exemplo de Título"
        description={<Text>Exemplo de Descrição</Text>}
        hasCloseButton
        closeButtonClicked={() => setBannerIsOpened(false)}
        buttonTitle="Button"
        buttonClicked={() => alert('clicked')}
      />
      <Button className="mt-md" onClick={() => setBannerIsOpened(true)}>
        Reabrir
      </Button>
    </>
  )
}

() => {
  const [bannerIsOpened, setBannerIsOpened] = useState(true)

  return (
    <>
      <Banner
        show={bannerIsOpened}
        status="info"
        title="Exemplo de Título"
        description={<Text>Exemplo de Descrição</Text>}
        hasCloseButton
        closeButtonClicked={() => setBannerIsOpened(false)}
        buttonTitle="Button"
        buttonClicked={() => alert('clicked')}
      />
      <Button className="mt-md" onClick={() => setBannerIsOpened(true)}>
        Reabrir
      </Button>
    </>
  )
}

Props

Prop	Tipo	Default	Descrição
show	`bool`	`true`	Define se o banner aparece ou não. (true: aparece. false: esconde).
status	`string`	`info`	Estado do banner. ('danger', 'warning', 'info', 'success').
title	`string`		Titulo do banner.
description	`node`		Descrição do banner.
hasCloseButton	`bool`	`false`	Habilita o botão de fechar banner.
buttonTitle	`string`		Texto para o botão, adicionando essa props habilita o botão no banner.
buttonClicked	`func`	`none`	Ação de clique no botão.
closeButtonClicked	`func`	`none`	Ação do clique do botão de fechar.