/

<Actions> Component

Share
Code Editor
<Actions

  ctas={[

    {

      title: 'View tutorials',

      url: '/tutorials',

      variant: 'primary'

    },

    {

      title: 'View documentation',

      url: '/docs',

      variant: 'tertiary-neutral'

    }

  ]}

/>

Examples

Light theme

View tutorialsView documentation

Dark theme

View tutorialsView documentation

Props

NameDescription
appearance
string
Display actions on light or dark background.
Options: "light", "dark"
layout
string
Display buttons inline or stacked by default.
Options: "inline", "stacked"
brand
string
Render primary variant button with product color.
Options: "hashicorp", "nomad", "consul", "terraform", "vault", "packer", "vagrant", "waypoint", "boundary"
size
string
Determines CTA button sizing.
Options: "small", "medium"
ctas
object
Array of CTAs. Minimum of one, max of two.
Object contains nested props, see below:
ctas.title*
string
The text that appears inside the button.
ctas.url
string
Where the button links to when clicked.
ctas.onClick
function
A function that will be called when the button is clicked.
ctas.variant
string
Applies a styling to the button based on the desired hierarchy.
Options: "primary", "secondary", "tertiary-neutral"