`<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.

<AlertBanner
  product="nomad"
  text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
  tag="New"
  url="https://hashicorp.com"
  linkText='Check it out'
/>

<AlertBanner
  product="nomad"
  text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
  tag="New"
  url="https://hashicorp.com"
  linkText='Check it out'
/>

<AlertBanner
  text="This banner should not show up."
  tag="Expired"
  expirationDate="2020-01-01T12:00:00-07:00"
/>

<AlertBanner
  text="This banner should not show up."
  tag="Expired"
  expirationDate="2020-01-01T12:00:00-07:00"
/>

Where it's used

Latest:7.0.1

Search with

Releases

Latest:7.0.1

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

Name	Description
`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.

<AlertBanner
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="vault"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="vault"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="terraform"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="terraform"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="waypoint"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="waypoint"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="consul"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="consul"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="boundary"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="boundary"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="vagrant"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="vagrant"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="packer"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

<AlertBanner
product="packer"
text="Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
tag="New"
url="https://hashicorp.com"
linkText='Check it out'
/>

`<AlertBanner>` Component

Code Editor

Code Editor

Where it's used

Releases

Props

Code Editor

Code Editor

Code Editor

Code Editor

Code Editor

Code Editor

Code Editor

Code Editor

<AlertBanner> Component

Code Editor

Code Editor

Where it's used

Releases

Props

Code Editor

Code Editor

Code Editor

Code Editor

Code Editor

Code Editor

Code Editor

Code Editor

`<AlertBanner>` Component