DAHLIA Pattern Library

Button Radio Group 

<ul class="button-radio-group inline-group">
    <li>
        <div class="button-radio">
            <input class="button expand" type="radio" name="pokemon" value="Red" id="pokemonRed">
            <label for="pokemonRed">Red</label>
        </div>
    </li>
    <li>
        <div class="button-radio">
            <input class="button expand" type="radio" name="pokemon" value="Blue" id="pokemonBlue">
            <label for="pokemonBlue">Blue</label>
        </div>
    </li>
    <li>
        <div class="button-radio">
            <input class="button expand" type="radio" name="pokemon" value="Black" id="pokemonBlack"><label for="pokemonBlack">Black</label>
        </div>
    </li>
</ul>
 
<ul class="button-radio-group inline-group">
  <li>   
     <div class="button-radio">
      <input class="button expand" type="radio" name="pokemon" value="Red" id="pokemonRed">
      <label for="pokemonRed">Red</label>
    </div>
  </li>
  <li>
    <div class="button-radio">
      <input class="button expand" type="radio" name="pokemon" value="Blue" id="pokemonBlue">
      <label for="pokemonBlue">Blue</label>
    </div>
  </li>
  <li>
    <div class="button-radio">
    <input class="button expand" type="radio" name="pokemon" value="Black" id="pokemonBlack"><label for="pokemonBlack">Black</label>
    </div>
  </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.