components / Layout and Navigation
Buttons
Buttons structure
The buttons can be of three categories: adaptive ( .btn-block ), large ( .btn-lg ) and small ( .btn-sm )
Each button is divided into two colors and their respective classes: .btn-primario e .btn-secondario
Each button can have the right arrow just adding the class .avanzamento and for every icon aligned to the left, add the class .iconed
Buttons adaptive
<button type="button" class="btn btn-primario btn-lg btn-block">Adaptive button</button>
<button type="button" class="btn btn-secondario btn-lg btn-block">Adaptive button</button>
<button type="button" class="btn btn-primario btn-lg btn-block" disabled>Adaptive button</button>
<button type="button" class="btn btn-secondario btn-lg btn-block" disabled>Adaptive button</button>
Buttons large and small right arrow
On the buttons you can add the arrow (which will always be on the right) with the addition of the avanzamento class
<button type="button" class="btn btn-primario btn-lg avanzamento">Large button</button>
<button type="button" class="btn btn-primario btn-sm avanzamento">Small button</button>
<br>
<button type="button" class="btn btn-secondario btn-lg avanzamento">Large button</button>
<button type="button" class="btn btn-secondario btn-sm avanzamento">Small button</button>
Buttons large and small iconed
Any other icon, will be inserted inside the button with its tag i and will always be placed on the left
<button type="button" class="btn btn-primario iconed btn-lg"><i class="fas fa-user-edit"></i>User button</button>
<button type="button" class="btn btn-primario iconed btn-sm"><i class="fas fa-pencil-alt"></i>Pencil button</button>
<br>
<button type="button" class="btn btn-secondario iconed btn-lg"><i class="fas fa-user-edit"></i>User button</button>
<button type="button" class="btn btn-secondario iconed btn-sm"><i class="fas fa-pencil-alt"></i>Pencil button</button>
Special button
There is also a special button for the number that can be used with the class .btn-number
<button type="button" class="btn btn-primario btn-lg btn-block btn-number">800.66.97.97</button>