cloud.gov pattern library

Trigger: Warning Outline Open

Trigger

The trigger component is a type of dropdown button component.

Use

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"
}