Knappar och etiketter

Knappar

Knappar används för att verkställa en handling. Knappen måste ha någon typ av fokus-state för att följa tillgänglighetsstandarder.

Beroende på vilken funktion knappen har så har knappen olika färger. Färgerna på knapparna är konstanta, oberoende av vilken färgpalett som används. Val av knapp ska vara konsekvent. Använd enbart dessa varianter.

Texten på en knapp ska vara kort och beskriva handlingen som knappen utför.

Storlekar

Exempel
Large 
.btn-lg
Exempel
Small 
.btn-sm
Exempel
Extra small 
.btn-xs
Exempel
<button class="btn btn-default [modifier class]">Button</button>
<button class="btn btn-primary [modifier class]">Button</button>

Skal

Exempel
Default 
.btn-default
Exempel
Primary 
.btn-primary
Exempel
Info 
.btn-info
Exempel
Success 
.btn-success
Exempel
Warning 
.btn-warning
Exempel
Danger 
.btn-danger
Exempel
Link 
.btn-link
Exempel
<button class="btn [modifier class]">Button Element</button>
<button disabled class="btn [modifier class]">Disabled</button>

Dropdown-menyer

Exempel
Default 
.btn-default
Exempel
Success 
.btn-success
Exempel
Danger 
.btn-danger
Exempel
<div class="dropdown">
  <button class="btn [modifier class] dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Meny
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Något</a></li>
    <li><a href="#">Något annat</a></li>
    <li><a href="#">Ännu en sak</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separerad sak</a></li>
  </ul>
</div>

Labels

Exempel
New
Default 
.label-default
Exempel
New
Primary 
.label-primary
Exempel
New
Info 
.label-info
Exempel
New
Success 
.label-success
Exempel
New
Warning 
.label-warning
Exempel
New
Danger 
.label-danger
Exempel
New
Link 
.label-link
Exempel
New 
<span class="label [modifier class]">New</span>