Displays links to available actions on a static form.
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:
Avoid:
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:
Name
Taylor, Ricky
Date of birth
01/01/1985
Sex
Male
Name
Taylor, Ricky
Date of birth
01/01/1985
Sex
Male
<div class="row">
<div class="col-lg-8 order-lg-1 order-2">
<h2 class="first-h2">User details</h2>
<turas-display asp-for="Name" />
<turas-display asp-for="DateOfBirth" />
<turas-display asp-for="Sex" />
</div>
<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 this user's details</turas-button>
</li>
<li>
<turas-button button-style="Link" button-type="Hyperlink" button-icon="fa-regular fa-ban">Deactivate this user's account</turas-button>
</li>
</form-action-panel>
</div>
</div>
<div class="row">
<div class="col-lg-8 order-lg-1 order-2">
<h2 class="first-h2">User details</h2>
<div class="form-group form-static-field "><p class="control-label ">Name</p>
<p class="form-control-static col" id="Name_Display">Taylor, Ricky</p>
</div>
<div class="form-group form-static-field "><p class="control-label ">Date of birth</p>
<p class="form-control-static col" id="DateOfBirth_Display">01/01/1985</p>
</div>
<div class="form-group form-static-field "><p class="control-label ">Sex</p>
<p class="form-control-static col" id="Sex_Display">Male</p>
</div>
</div>
<div class="col-lg-4 order-lg-2 order-1">
<div class="form-action-panel">
<div class="panel-heading">
<h2>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 this user's details</a>
</li>
<li>
<a class="btn btn-link "><span class="fa-regular fa-ban" aria-hidden="true"></span>Deactivate this user's account</a>
</li>
</ul>
</div>
</div>
</div>