DAHLIA Pattern Library

Button Dropdown 

<button class="button dropdown-button has-icon--right text-align-left small " href="#" aria-expanded="false">
  <span class="ui-icon ui-small" aria-hidden="true">
    <svg>
      <use xlink:href="#i-arrow-down"></use>
    </svg>
  </span>
  Button
</button>
<ul class="dropdown-menu" role="listbox" aria-hidden="true" aria-activedescendant tabindex="-1" style="display: none;">
    <li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is a link</a></li>
    <li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is another</a></li>
    <li class="dropdown-menu_item is-selected" role="option" aria-selected="true"><a href="#">Yet another</a></li>
</ul>
 
<button class="button dropdown-button has-icon--right text-align-left small {{default classes ''}}" href="#" aria-expanded="false">
  <span class="ui-icon ui-{{default scale 'small'}}" aria-hidden="true">
    <svg>
      <use xlink:href="#i-{{default icon 'arrow-down'}}"></use>
    </svg>
  </span>
  {{default text 'Button'}}
</button>
<ul class="dropdown-menu" role="listbox" aria-hidden="true" aria-activedescendant tabindex="-1" style="display: none;">
  <li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is a link</a></li>
  <li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is another</a></li>
  <li class="dropdown-menu_item is-selected" role="option" aria-selected="true"><a href="#">Yet another</a></li>
</ul>
 
{
  "modifiers": [
    "normal",
    "primary",
    "secondary",
    "tertiary",
    "alert",
    "alert-fill",
    "tint",
    "deep",
    "tiny is-leased",
    "tiny is-waitlisted",
    "tiny is-processing",
    "tiny is-approved",
    "tiny is-withdrawn",
    "tiny is-disqualified",
    "tiny is-appealed",
    "ghost-white",
    "large",
    "tall",
    "small",
    "tiny",
    "expand",
    "disabled",
    "button-link"
  ],
  "icons": [
    "arrow-down",
    "download",
    "forward",
    "info",
    "like"
  ]
}

There are no notes for this item.