Components

Action panel

Flexible UI panel for presenting content with contextual actions like buttons, links, inputs, etc.

Component

View code

Show playground

Panel title

Panel description

Insert actions here

Props

Props	Default	Type
`title`	`'Title'`	`string`
`description`	`'Description'`	`string`
`orientation`	`VERTICAL`	`Orientation`
`hasShadow`	`true`	`boolean`
`hasBorder`	`false`	`boolean`

Slots

Name	Description
`actions`	Template to render actions in the panel such as buttons or other components.

 <template>
    <ActionPanel
        title="My Panel Title"
        description="Additional context here"
    >
        <template #actions>
            <!-- Insert content here -->
        </template>
    </ActionPanel>
</template>

Usage

title

Action panel title.

 <template>
    <ActionPanel title="My Panel Title" />
</template>

Type: string
Default: 'Title'

description

Optional short text displayed under the title.

 <template>
    <ActionPanel
        title="My Panel Title"
        description="Additional context here"
    />
</template>

Type: string
Default: 'Description'

orientation

Sets the layout direction of the panel’s actions content. Uses the Orientation enum.

 <template>
    <ActionPanel
        title="Panel"
        :orientation="Orientation.HORIZONTAL"
    />
</template>

Type: Orientation
Default: Orientation.VERTICAL

Options

Value	Description
`Orientation.HORIZONTAL`	horizontal
`Orientation.VERTICAL`	vertical

hasShadow

Toggles shadow around the panel container.

 <template>
    <ActionPanel
        title="Panel"
        :hasShadow="false"
    />
</template>

Type: boolean
Default: true

hasBorder

Toggles shadow around the panel container.

 <template>
    <ActionPanel
        title="Panel"
        :hasBorder="true"
    />
</template>

Type: boolean
Default: false