Actions panel

Displays links to available actions on a static form.

Examples

Usage

The actions panel is a user interface component found on pages displaying completed form data. They offer users a clear and concise list of actions they can take based on the information shown.

Do:

use the actions panel only on read-only or static form pages where users are reviewing previously submitted or completed information
use concise, verb-first labels that clearly describe the action, for example, ‘Edit user details’, ‘Deactivate user account’
group related actions logically and maintain consistent ordering across similar pages

Avoid:

using the actions panel on pages that contain active form inputs, it is intended for static views only
writing overly long or descriptive labels such as ‘Edit this user’s account’, keep them short and scannable
including actions that are not relevant to the current page or the user’s role
duplicating actions that are already available elsewhere on the page unless there is a clear user need

Example actions

Shorter labels are easier to scan and understand, particularly in an actions panel where users expect clear, concise commands. In dense user interfaces, they also help reduce cognitive load and improve overall usability. Here’s some examples of verb first, concise actions:

Edit user details
Deactivate user account
Download submission
Print user details
Add supporting information
Change contact preferences
Change assigned reviewer
Archive record
Report incorrect information

Copy


  
        <div class="col-lg-4 order-lg-2 order-1">

            
                <form-action-panel>
                    <li>
                        <turas-button button-style="Link" button-type="Hyperlink" button-icon="fa-regular fa-pen-to-square">Edit user details</turas-button>
                    </li>

                    <li>
                        <turas-button button-style="Link" button-type="Hyperlink" button-icon="fa-regular fa-ban">Deactivate user account</turas-button>
                    </li>
                </form-action-panel>
            

        </div>

Copy


  
        <div class="col-lg-4 order-lg-2 order-1">

            
                
        <aside class="form-action-panel" aria-labelledby="action-heading">
            <div class="panel-heading">
                <h2 id="action-heading">Actions</h2>
            </div> 
            <ul class="list-unstyled">
                
                    <li>
                        <a class="btn btn-link "><span class="fa-regular fa-pen-to-square" aria-hidden="true"></span>Edit user details</a>
                    </li>

                    <li>
                        <a class="btn btn-link "><span class="fa-regular fa-ban" aria-hidden="true"></span>Deactivate user account</a>
                    </li>
                
            </ul>
        </aside>
            

        </div>

Parameters for form-action-panel

additional-classes - Allows for custom CSS classes to be added to the form action panel
panel-heading - change the default panel heading from 'Actions' to a custom string

Testing

Check that the actions panel:

can be used with a keyboard only, with no keyboard traps
shows a visible focus state on all interactive elements
announces links and buttons correctly to assistive technologies
announces the panel heading and available actions correctly with screen readers
remains usable at 400% zoom and supports reflow without horizontal scrolling

Developer considerations

When using the actions panel component:

use <aside> for the panel when it contains complementary actions related to the main content
provide an accessible name using a visible heading and aria-labelledby
make sure actions have clear labels (avoid generic text such as “Edit” or “Change” without context)
make sure the DOM order matches the expected reading order, even when using visual layout changes
if icons are decorative, hide them from assistive technologies using aria-hidden="true"
make sure a visible focus state that meets contrast requirements
make sure touch targets meet the minimum size and spacing requirements, with a target size of at least 24 × 24 CSS pixels

Checkbox