/

<AlertBanner> Component

AlertBanner is a component used widely across HashiCorp websites to draw attention to an important release, event, etc. It appears in bold colors at the top of the website, and can be dismissed.

Share
Code Editor
<AlertBanner

  product="nomad"

  text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."

  tag="New"

  url="https://hashicorp.com"

  linkText='Check it out'

/>
Share
Code Editor
<AlertBanner

  text="This banner should not show up."

  tag="Expired"

  expirationDate="2020-01-01T12:00:00-07:00"

/>

Where it's used

Latest:7.1.0
Search with

Releases

Latest:7.1.0
registry.npmjs.org
0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...
6.x.x
Loading 6.x.x releases...
7.x.x
Loading 7.x.x releases...

Props

NameDescription
tag*
string
The text contained inside the tag to the left
text*
string
The text in the main area
url*
string
where to link to when clicked
product
string
A lower-case product identifier to pull in respective theme colors. The default is hashicorp blue.
Options: "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint"
linkText
string
Secondary text styled as a link
name
string
string used for cookie name (defaults to slugified text property)
expirationDate
string
A datetime string that, when set, controls if the alert banner should appear
hideOnMobile
boolean
If true, the alert banner will be forcefully hidden on mobile.
Share
Code Editor
<AlertBanner

text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."

tag="New"

url="https://hashicorp.com"

linkText='Check it out'

/>
Share
Code Editor
<AlertBanner

product="vault"

text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."

tag="New"

url="https://hashicorp.com"

linkText='Check it out'

/>
Share
Code Editor
<AlertBanner

product="terraform"

text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."

tag="New"

url="https://hashicorp.com"

linkText='Check it out'

/>
Share
Code Editor
<AlertBanner

product="waypoint"

text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."

tag="New"

url="https://hashicorp.com"

linkText='Check it out'

/>
Share
Code Editor
<AlertBanner

product="consul"

text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."

tag="New"

url="https://hashicorp.com"

linkText='Check it out'

/>
Share
Code Editor
<AlertBanner

product="boundary"

text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."

tag="New"

url="https://hashicorp.com"

linkText='Check it out'

/>
Share
Code Editor
<AlertBanner

product="vagrant"

text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."

tag="New"

url="https://hashicorp.com"

linkText='Check it out'

/>
Share
Code Editor
<AlertBanner

product="packer"

text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."

tag="New"

url="https://hashicorp.com"

linkText='Check it out'

/>