Tallinna infosüsteemides on eristatud 3 taset tegevusi. Primaarsed (sinised), sekundaarsed (hallid) ja tertsiaarsed (lingid). Ideaalis on ühes vaates kasutusel ainult üks primaarne nupp.
Primaarne nupp peaks alati tähistama tegevusvoo soovitud tulemust. N: otsingu puhul otsingu päringu tegemine, andmete sisestamisel salvestamine jne.
<button class="button ">
Button
</button>
{
"content": "Button"
}
<button class="button button--secondary">
Button
</button>
{
"content": "Button",
"button-modifiers": "button--secondary"
}
<button class="button button--triarity">
Button
</button>
{
"content": "Button",
"button-modifiers": "button--triarity"
}
Kontrastne nupp on reserveeritud erijuhtudeks, kus tavaline primaarne nupp ei ole oma taustaga (N: fotod) võrreldes piisavalt kontrastne.
<button class="button button--contrast">
Button
</button>
{
"content": "Button",
"button-modifiers": "button--contrast"
}
<div class="row">
<div class="col-auto"><button class="button ">
<i class="fas fa-cog button__icon--left" aria-hidden="true" ></i>
Button
</button>
</div>
<div class="col-auto"><button class="button button--secondary">
<i class="fas fa-cog button__icon--left" aria-hidden="true" ></i>
Button
</button>
</div>
<div class="col-auto"><button class="button button--triarity">
<i class="fas fa-cog button__icon--left" aria-hidden="true" ></i>
Button
</button>
</div>
<div class="col-auto"><button class="button ">
Button
<i class="fas fa-cog button__icon--right" aria-hidden="true" ></i>
</button>
</div>
<div class="col-auto"><button class="button button--secondary">
Button
<i class="fas fa-cog button__icon--right" aria-hidden="true" ></i>
</button>
</div>
<div class="col-auto"><button class="button button--triarity">
Button
<i class="fas fa-cog button__icon--right" aria-hidden="true" ></i>
</button>
</div>
</div>
{
"content": "Button"
}
<button class="button ">
<i class="fas fa-cog button__icon--center" aria-hidden="true" ></i>
</button>
{
"content": null,
"icon-center": "cog"
}