DAHLIA Pattern Library

Button Segments 

<ul class="segmented-radios inline-group">
    <li>
        <input type="radio" name="seg-1" value="Organisation" id="seg-Organisation">
        <label for="seg-Organisation" class="button ghost">Organisation</label>
    </li>
    <li>
        <input type="radio" name="seg-1" value="Users" id="seg-Users">
        <label for="seg-Users" class="button ghost">Users</label>
    </li>
    <li>
        <input type="radio" name="seg-1" value="Units" id="seg-Units">
        <label for="seg-Units" class="button ghost">Units</label>
    </li>
    <li>
        <input type="radio" name="seg-1" value="Tags" id="seg-Tags">
        <label for="seg-Tags" class="button ghost">Tags</label>
    </li>
</ul>
 
<ul class="segmented-radios inline-group">
  <li>
  <input type="radio" name="seg-1" value="Organisation" id="seg-Organisation">
  <label for="seg-Organisation" class="button ghost">Organisation</label>
  </li>
  <li>
  <input type="radio" name="seg-1" value="Users" id="seg-Users">
  <label for="seg-Users" class="button ghost">Users</label>
  </li>
  <li>
  <input type="radio" name="seg-1" value="Units" id="seg-Units">
  <label for="seg-Units" class="button ghost">Units</label>
  </li>
  <li>
  <input type="radio" name="seg-1" value="Tags" id="seg-Tags">
  <label for="seg-Tags" class="button ghost">Tags</label>
  </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.