/

<Actions> Component

Share
Code Editor
<Actions

  ctas={[

    {

      title: 'View tutorials',

      href: '/tutorials',

    },

    {

      title: 'View documentation',

      href: '/docs',

    }

  ]}

/>

Examples

Light theme

View tutorialsView documentation
View tutorialsView documentation
View tutorialsView documentation

Dark theme

View tutorialsView documentation
View tutorialsView documentation
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"
alignment
string
Align items when stacked.
Options: "left", "center"
theme
string
Render primary variant button CTA 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. A CTA can either be rendered as a Button or a StandaloneLink via the cta.type prop.
Object contains nested props, see below:
ctas.title*
string
The text that appears inside the button.
ctas.href*
string
Where the button links to when clicked.
ctas.type
string
Render either a Button component or StandaloneLink component for the CTA. Defaults to Button.
Options: "button", "standalone-link"
ctas.onClick
function
A function that will be called when the button is clicked.