<Button> ComponentThe button is used widely across HashiCorp properties, and has many ways it can be customized. Let's start with its most basic form.
There are many props that can be used to customize this component, all of which are listed below:
| Name | Description |
|---|---|
title*string | The text that appears inside the button. |
urlstring | Where the button links to when clicked. |
labelstring | 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. |
classNamestring | A custom class to be added directly to the button if necessary. |
externalboolean | If true, rel="noopener" and target="_blank" will be set. |
onClickfunction | A function that will be called when the button is clicked. |
sizestring | Styles the button with modified padding and font-size. |
linkTypestring | Allows convenient rendering of animated icons associate with each link type. If "outbound", rel="noopener" and target="_blank" will be set. |
disabledboolean | If true, button will be disabled |
themeobject | Controls the visual appearance of the button. Object contains nested props, see below: |
theme.brandstring | Styles the button with a color based on a HashiCorp product |
theme.variantstring | Applies a styling to the button based on the desired hierarchy. |
iconobject | Options for icon display within the button. |
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.
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.
We'll explore a few specific variations of props below:
Note how despite the color theme, the appearance is neutral.