The trigger component is a type of dropdown button component.
Use the trigger component when you want to allow the user to expand a content area to reveal more actions, links or content.
To use the trigger component, add the classes usa-button action trigger
to a
<button>
element.
In addition, add any of the following classes to the button to style the button based on status.
Class | Description |
---|---|
action-primary |
Use for the most important action the user can take in that section of the page. |
action-base |
Use for standard actions the user can take and options like cancel. |
action-cautious |
Use for actions that are currently disabled for the user. |
action-warning |
Use for actions that can have critical impact on the user like delete. |
action-finish |
Use for actions that complete a process for the user. |
usa-button-outline |
Used to change the look of the button to an outline. |
{% if buttonStatus == 'primary' %}
<button class="usa-button trigger action {% if isOutline %}usa-button-outline {% endif %}action-{{ buttonStatus }}">
<span class="trigger-content row-center-x">
<span class="trigger-icon col-fit">
{% render '@fill-icons--org-small' %}
</span>
<span class="trigger-text col-fill">
{{ buttonText }}
</span>
<span class="trigger-action col-fit">
{% if isOpen %}
{% if not isOutline %}
{% render '@icon-ui--chevron-up-white' %}
{% else %}
{% render '@icon-ui--chevron-up' %}
{% endif %}
{% else %}
{% if not isOutline %}
{% render '@icon-ui--chevron-down-white' %}
{% else %}
{% render '@icon-ui--chevron-down' %}
{% endif %}
{% endif %}
</span>
</span>
</button>
{% endif %}
{
"isOutline": true,
"isOpen": true,
"buttonStatus": "warning",
"buttonStyle": "outline",
"buttonText": "warning-outline"
}