/

<Button> Component

The button is used widely across HashiCorp properties, and has many ways it can be customized. Let's start with its most basic form.

Share
Code Editor
<Button title='Button Text' />

Where it's used

Latest:6.3.1
Search with

Releases

Latest:6.3.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...

Button Props

There are many props that can be used to customize this component, all of which are listed below:

NameDescription
title*
string
The text that appears inside the button.
url
string
Where the button links to when clicked.
label
string
A label that describes what this button does or where it takes the user. This is used for accessibility when the button text itself may not provide enough behavioral context. For example, when using generic CTAs ("Learn More"), use this property to add clarity.
className
string
A custom class to be added directly to the button if necessary.
external
boolean
If true, rel="noopener" and target="_blank" will be set.
onClick
function
A function that will be called when the button is clicked.
size
string
Styles the button with modified padding and font-size.
Options: "small", "medium"
linkType
string
Allows convenient rendering of animated icons associate with each link type. If "outbound", rel="noopener" and target="_blank" will be set.
Options: "inbound", "outbound", "anchor", "download"
disabled
boolean
If true, button will be disabled
theme
object
Controls the visual appearance of the button.
Object contains nested props, see below:
theme.brand
string
Styles the button with a color based on a HashiCorp product
Options: "neutral", "hashicorp", "nomad", "consul", "terraform", "vault", "packer", "vagrant", "waypoint", "boundary"
theme.variant
string
Applies a styling to the button based on the desired hierarchy.
Options: "primary", "secondary", "tertiary", "tertiary-neutral", "ghost"
icon
object
Options for icon display within the button.

Visual Example

The example below shows some UI controls for the props that can most significantly change the button's visual appearance. Tinker with them a little to get a feel for the ways a button can be visually customized.

Playground

Now let's look at an example with a code editor that shows all available props. You can tinker with it below. All of the properties below other than the title are set to their default values.

Share
Code Editor
<Button

  title='Primary Button'

  url={undefined}  

  label="Test button that goes nowhere"

  className=''

  external={false}

  disabled={false}

  onClick={undefined}

  linkType={undefined}

  size='medium'

  theme={{

    variant: 'primary',

    brand: 'hashicorp'

  }}

  icon={{

    svg: undefined,

    position: undefined,

    isAnimated: undefined,

    animationId: undefined                      

  }}

/>

Examples

We'll explore a few specific variations of props below:

Secondary Button
Share
Code Editor
<Button

  title='Secondary Button'

  theme={{ variant: 'secondary' }}

/>
Tertiary Button with linkType and brand
Share
Code Editor
<Button

  title='Tertiary Button'

  linkType='inbound'

  theme={{

    variant: 'tertiary',

    brand: 'nomad'

  }}

/>
Tertiary Neutral Button

Note how despite the color theme, the appearance is neutral.

Share
Code Editor
<Button

  title='Tertiary Button'

  linkType='inbound'

  theme={{

    variant: 'tertiary-neutral',

    brand: 'terraform'

  }}

/>
Disabled Button
Share
Code Editor
<Button

  title='Disabled Button'

  disabled={true}

/>
Button with Download Icon
Share
Code Editor
<Button

  title='Download'

  linkType='download'

  icon={{ position: 'left', isAnimated: true }}

/>
Button with Custom Icon
Share
Code Editor
<Button

  title='Support'

  theme={{ brand: 'consul' }}

  icon={{

    position: 'left',

    isAnimated: true,

    svg: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path clip-rule="evenodd" d="M12 16a4 4 0 100-8 4 4 0 000 8z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M14.83 9.17l4.24-4.24M14.83 9.17l3.53-3.53M4.93 19.07l4.24-4.24" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'

  }}

/>