Action Panel
A bordered card that communicates a single, focused action. Variants for toggle, input, link, well, and button placement.
Molecule
Button · Card · Switch · Input
When To Use
- Use buttons for explicit user-triggered actions such as submit, save, continue, or open.
- Choose the variant and size that matches the action hierarchy in the surrounding view.
- Prefer this page when you need to compare action density, icon usage, and loading or disabled states side by side.
When Not To Use
- Do not use a button when plain text, static status, or passive decoration would communicate the state just as well.
- Do not overload a single view with too many equally prominent buttons; reduce or demote secondary actions first.
Accessibility Notes
- Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
- Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
- Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.
Key Props / API
Props
title, description, action, actions, link, variant
Example Code
import { ActionPanel } from "@hilum/ui"
<ActionPanel
title="Delete your account"
description="Once you delete your account, you will lose all data."
action={{ label: "Delete account", variant: "destructive" }}
/>Action Panel · Basic
Stacked layout
Title, description, and action stacked
Delete your account
Once you delete your account, you will lose all data associated with it.
Action Panel · Inline
Side-by-side layout
Text and action on the same row
Export data
Download all your data as a .zip file.
Action Panel · With toggle
Toggle switch as action
Switch replaces the button — inline layout
Enable two-factor authentication
Add an extra layer of security to your account.
Marketing emails
Receive product updates, promotions, and announcements.
Action Panel · With input
Input inside panel
Panel with inline form
Email notifications
Enter the email address where you'd like to receive notifications.
Action Panel · With link
Privacy policy
Read our privacy policy to understand how we use your data.
Terms of service
Review the terms governing your use of this platform.
Action Panel · Button at top right
Inline with short meta
Current state on left, action on right
Custom domain
yoursite.com
API key
sk-••••••••••••4a2f
Action Panel · With well
Nested content panel
Gray well inside for current state display
Payment method
Manage the card used for billing.
Visa ending in 4242
Expires 12/2026
Action Panel · Settings page composition
Stacked settings panels
Multiple panels in a danger zone section
Export data
Download a copy of your data in JSON or CSV format.
Transfer ownership
Transfer your account and all its data to another user.
Delete account
Permanently delete your account. This cannot be undone.