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.
<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"
}