Marketing component

Hero Actions

Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.

8 props1 slots0 outputsTheme readyResponsive

Interactive playground

Configure Hero Actions

Change any prop and inspect the server-rendered component immediately.

Live preview

Browse components

View metrics

Component code

<HeroActions
  actions='[
    {
      "id": "hero-actions-0-1",
      "key": "hero-actions-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#hero-actions-demo",
      "actionHref": "#hero-actions-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "hero-actions-0-2",
      "key": "hero-actions-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#hero-actions-demo",
      "actionHref": "#hero-actions-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  align="start"
/>

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Primary and secondary actions

Group the most important hero actions with consistent spacing and hierarchy.

Live preview

Browse components

View metrics

Component usage.wrn

<HeroActions
  actions='[
    {
      "label": "Browse components",
      "href": "#components",
      "icon": "icon-[lucide--blocks]",
      "variant": "primary"
    },
    {
      "label": "View metrics",
      "href": "#metrics",
      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
      "variant": "outline"
    }
  ]'
/>

Compact

Centered campaign actions

Center actions beneath a stacked hero or CTA message.

Live preview

Browse components

View metrics

Component usage.wrn

<HeroActions
  actions='[
    {
      "label": "Browse components",
      "href": "#components",
      "icon": "icon-[lucide--blocks]",
      "variant": "primary"
    },
    {
      "label": "View metrics",
      "href": "#metrics",
      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
      "variant": "outline"
    }
  ]'
  align="center"
  size="sm"
/>

Advanced

Vertical mobile-first actions

Use a vertical group for narrow panels, onboarding, or three-action flows.

Live preview

Browse components

View metrics

Contact support

Component usage.wrn

<HeroActions
  actions='[
    {
      "label": "Browse components",
      "href": "#components",
      "icon": "icon-[lucide--blocks]",
      "variant": "primary"
    },
    {
      "label": "View metrics",
      "href": "#metrics",
      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
      "variant": "outline"
    },
    {
      "label": "Contact support",
      "href": "#support",
      "icon": "icon-[lucide--life-buoy]",
      "variant": "ghost"
    }
  ]'
  align="end"
  orientation="vertical"
  size="lg"
/>

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`actions`	unknown[]	`[]`	No
`align`	string	`"left"`	No
`orientation`	string	`"horizontal"`	No
`stackOnMobile`	boolean	`true`	No
`fullWidthMobile`	boolean	`true`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`class`	string	`""`	No