<ActionBar.Action>

Render an action button in the <ActionBar>. Normally used inside an <ActionBar.Group>.

<ActionBar label="Actions">
  <ActionBar.Group>
    <ActionBar.Action onClick={() => console.log("Clicked!")}>
      ★
    </ActionBar.Action>
  </ActionBar.Group>
</ActionBar>

Interactive Demo

Actions

Props

Prop	Example	Type	Status
`children`	`<svg />`	ReactNode	Required
`onClick`	`() => void`	Function	-
`label`	`"Label"`	String	-

Required Props

`children`

A node to render as the children of the action. Should be a string or an icon.

Puck uses Lucide icons (opens in a new tab). You can use lucide-react (opens in a new tab) to choose a similar icon, if desired.

`onClick(e)`

An onClick callback (opens in a new tab) triggered when the user clicks the action.

Optional Props

`label`

A label to provide an accessible label when using icon.