CDLIB UI

Buttons 

<!-- 1 -->
<button class="o-button1" aria-label="button 1 aria label"></button>


<!-- 2 -->
<button class="o-button2" aria-label="button 2 aria label"></button>


<!-- 3 -->
<button class="o-button3" aria-label="button 3 aria label"></button>


<!-- 4 -->
<button class="o-button4" type="submit">Button 4</button>


<!-- 5 -->
<button class="o-button5">Close</button>


<!-- 6 -->
<button class="o-button6">Open</button>


<!-- 7 -->
<button class="o-button7" aria-pressed="false">Toggle (un-pressed)</button>


<!-- 8 -->
<button class="o-button7" aria-pressed="true">Toggle (pressed)</button>


<!-- 1 -->
<button class="o-button1" aria-label="{{ button1.ariaLabel }}"></button>

<!-- 2 -->
<button class="o-button2" aria-label="{{ button2.ariaLabel }}"></button>

<!-- 3 -->
<button class="o-button3" aria-label="{{ button3.ariaLabel }}"></button>

<!-- 4 -->
<button class="o-button4" type="{{ button4.type }}">{{ button4.text }}</button>

<!-- 5 -->
<button class="o-button5">{{ button5.text }}</button>

<!-- 6 -->
<button class="o-button6">{{ button6.text }}</button>

<!-- 7 -->
<button class="o-button7" aria-pressed="false">{{ button7.text }}</button>

<!-- 8 -->
<button class="o-button7" aria-pressed="true">{{ button8.text }}</button>
 
/* 1 */
{
  "button1": {
    "ariaLabel": "button 1 aria label",
    "text": "Button 1"
  },
  "button2": {
    "ariaLabel": "button 2 aria label",
    "text": "Button 2"
  },
  "button3": {
    "ariaLabel": "button 3 aria label",
    "text": "Button 3"
  },
  "button4": {
    "type": "submit",
    "ariaLabel": "button 4 aria label",
    "text": "Button 4"
  },
  "button5": {
    "ariaLabel": "button 5 aria label",
    "text": "Close"
  },
  "button6": {
    "ariaLabel": "button 6 aria label",
    "text": "Open"
  },
  "button7": {
    "text": "Toggle (un-pressed)"
  },
  "button8": {
    "text": "Toggle (pressed)"
  },
  "button9": {
    "text": "Contact Information"
  }
}


/* 2 */
{
  "button1": {
    "ariaLabel": "button 1 aria label",
    "text": "Button 1"
  },
  "button2": {
    "ariaLabel": "button 2 aria label",
    "text": "Button 2"
  },
  "button3": {
    "ariaLabel": "button 3 aria label",
    "text": "Button 3"
  },
  "button4": {
    "type": "submit",
    "ariaLabel": "button 4 aria label",
    "text": "Button 4"
  },
  "button5": {
    "ariaLabel": "button 5 aria label",
    "text": "Close"
  },
  "button6": {
    "ariaLabel": "button 6 aria label",
    "text": "Open"
  },
  "button7": {
    "text": "Toggle (un-pressed)"
  },
  "button8": {
    "text": "Toggle (pressed)"
  },
  "button9": {
    "text": "Contact Information"
  }
}


/* 3 */
{
  "button1": {
    "ariaLabel": "button 1 aria label",
    "text": "Button 1"
  },
  "button2": {
    "ariaLabel": "button 2 aria label",
    "text": "Button 2"
  },
  "button3": {
    "ariaLabel": "button 3 aria label",
    "text": "Button 3"
  },
  "button4": {
    "type": "submit",
    "ariaLabel": "button 4 aria label",
    "text": "Button 4"
  },
  "button5": {
    "ariaLabel": "button 5 aria label",
    "text": "Close"
  },
  "button6": {
    "ariaLabel": "button 6 aria label",
    "text": "Open"
  },
  "button7": {
    "text": "Toggle (un-pressed)"
  },
  "button8": {
    "text": "Toggle (pressed)"
  },
  "button9": {
    "text": "Contact Information"
  }
}


/* 4 */
{
  "button1": {
    "ariaLabel": "button 1 aria label",
    "text": "Button 1"
  },
  "button2": {
    "ariaLabel": "button 2 aria label",
    "text": "Button 2"
  },
  "button3": {
    "ariaLabel": "button 3 aria label",
    "text": "Button 3"
  },
  "button4": {
    "type": "submit",
    "ariaLabel": "button 4 aria label",
    "text": "Button 4"
  },
  "button5": {
    "ariaLabel": "button 5 aria label",
    "text": "Close"
  },
  "button6": {
    "ariaLabel": "button 6 aria label",
    "text": "Open"
  },
  "button7": {
    "text": "Toggle (un-pressed)"
  },
  "button8": {
    "text": "Toggle (pressed)"
  },
  "button9": {
    "text": "Contact Information"
  }
}


/* 5 */
{
  "button1": {
    "ariaLabel": "button 1 aria label",
    "text": "Button 1"
  },
  "button2": {
    "ariaLabel": "button 2 aria label",
    "text": "Button 2"
  },
  "button3": {
    "ariaLabel": "button 3 aria label",
    "text": "Button 3"
  },
  "button4": {
    "type": "submit",
    "ariaLabel": "button 4 aria label",
    "text": "Button 4"
  },
  "button5": {
    "ariaLabel": "button 5 aria label",
    "text": "Close"
  },
  "button6": {
    "ariaLabel": "button 6 aria label",
    "text": "Open"
  },
  "button7": {
    "text": "Toggle (un-pressed)"
  },
  "button8": {
    "text": "Toggle (pressed)"
  },
  "button9": {
    "text": "Contact Information"
  }
}


/* 6 */
{
  "button1": {
    "ariaLabel": "button 1 aria label",
    "text": "Button 1"
  },
  "button2": {
    "ariaLabel": "button 2 aria label",
    "text": "Button 2"
  },
  "button3": {
    "ariaLabel": "button 3 aria label",
    "text": "Button 3"
  },
  "button4": {
    "type": "submit",
    "ariaLabel": "button 4 aria label",
    "text": "Button 4"
  },
  "button5": {
    "ariaLabel": "button 5 aria label",
    "text": "Close"
  },
  "button6": {
    "ariaLabel": "button 6 aria label",
    "text": "Open"
  },
  "button7": {
    "text": "Toggle (un-pressed)"
  },
  "button8": {
    "text": "Toggle (pressed)"
  },
  "button9": {
    "text": "Contact Information"
  }
}


/* 7 */
{
  "button1": {
    "ariaLabel": "button 1 aria label",
    "text": "Button 1"
  },
  "button2": {
    "ariaLabel": "button 2 aria label",
    "text": "Button 2"
  },
  "button3": {
    "ariaLabel": "button 3 aria label",
    "text": "Button 3"
  },
  "button4": {
    "type": "submit",
    "ariaLabel": "button 4 aria label",
    "text": "Button 4"
  },
  "button5": {
    "ariaLabel": "button 5 aria label",
    "text": "Close"
  },
  "button6": {
    "ariaLabel": "button 6 aria label",
    "text": "Open"
  },
  "button7": {
    "text": "Toggle (un-pressed)"
  },
  "button8": {
    "text": "Toggle (pressed)"
  },
  "button9": {
    "text": "Contact Information"
  }
}


/* 8 */
{
  "button1": {
    "ariaLabel": "button 1 aria label",
    "text": "Button 1"
  },
  "button2": {
    "ariaLabel": "button 2 aria label",
    "text": "Button 2"
  },
  "button3": {
    "ariaLabel": "button 3 aria label",
    "text": "Button 3"
  },
  "button4": {
    "type": "submit",
    "ariaLabel": "button 4 aria label",
    "text": "Button 4"
  },
  "button5": {
    "ariaLabel": "button 5 aria label",
    "text": "Close"
  },
  "button6": {
    "ariaLabel": "button 6 aria label",
    "text": "Open"
  },
  "button7": {
    "text": "Toggle (un-pressed)"
  },
  "button8": {
    "text": "Toggle (pressed)"
  },
  "button9": {
    "text": "Contact Information"
  }
}

No notes defined.