UI Atoms
Buttons
1.1 Buttons colors
<button type="button" class="amui-a-btn is--default btn">Default</button>
<button type="button" class="amui-a-btn is--hollow btn">Hollow</button>
<button type="button" class="amui-a-btn is--primary btn">Primary</button>
<button type="button" class="amui-a-btn is--secondary btn">Secondary</button>
<button type="button" class="amui-a-btn is--disabled btn">Disabled</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="amui-a-btn is--success btn">Success</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="amui-a-btn is--warning btn">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="amui-a-btn is--danger btn">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<a href="#" class="amui-a-btn is--link btn">Link</a>
1.2 Buttons sizes
<!-- Extra small button -->
<button type="button" class="amui-a-btn is--default is--xs">Extra small button</button>
<!-- Small button -->
<button type="button" class="amui-a-btn is--default is--sm">Small button</button>
<!-- Default button -->
<button type="button" class="amui-a-btn is--default btn">Default button</button>
<!-- Large button -->
<button type="button" class="amui-a-btn is--default is--lg">Large button</button>
<!-- Extra Large button -->
<button type="button" class="amui-a-btn is--default is--xl">Extra Large button</button>
1.3 Buttons rounded
<!-- Extra small rounded button -->
<button type="button" class="amui-a-btn is--default is--xs is--rounded">Extra small button</button>
<!-- Small rounded button -->
<button type="button" class="amui-a-btn is--default is--sm is--rounded">Small button</button>
<!-- Default rounded button -->
<button type="button" class="amui-a-btn is--default btn is--rounded">Default button</button>
<!-- Large rounded button -->
<button type="button" class="amui-a-btn is--default is--lg is--rounded">Large button</button>
<!-- Extra Large rounded button -->
<button type="button" class="amui-a-btn is--default is--xl is--rounded">Extra Large button</button>
1.4 Buttons icons (On left)
<button type="button" class="amui-a-btn is--default is--xs is--icon-left"><i class="material-icons md-16">add</i><span>Nouveau</span></button>
<button type="button" class="amui-a-btn is--default is--sm is--icon-left"><i class="material-icons md-18">add</i><span>Nouveau</span></button>
<button type="button" class="amui-a-btn is--default btn is--icon-left"><i class="material-icons md-24">add</i><span>Nouveau</span></button>
<button type="button" class="amui-a-btn is--default is--lg is--icon-left"><i class="material-icons md-24">add</i><span>Nouveau</span></button>
<button type="button" class="amui-a-btn is--default is--xl is--icon-left"><i class="material-icons md-36">add</i><span>Nouveau</span></button>
1.5 Buttons icons (On right)
<button type="button" class="amui-a-btn is--default is--xs is--icon-right"><span>Nouveau</span><i class="material-icons md-16">add</i></button>
<button type="button" class="amui-a-btn is--default is--sm is--icon-right"><span>Nouveau</span><i class="material-icons md-18">add</i></button>
<button type="button" class="amui-a-btn is--default btn is--icon-right"><span>Nouveau</span><i class="material-icons md-24">add</i></button>
<button type="button" class="amui-a-btn is--default is--lg is--icon-right"><span>Nouveau</span><i class="material-icons md-24">add</i></button>
<button type="button" class="amui-a-btn is--default is--xl is--icon-right"><span>Nouveau</span><i class="material-icons md-36">add</i></button>
1.6 Buttons icon only
<button type="button" class="amui-a-btn is--default is--xs is--icon-only"><i class="material-icons md-16">add</i></button>
<button type="button" class="amui-a-btn is--default is--sm is--icon-only"><i class="material-icons md-24">add</i></button>
<button type="button" class="amui-a-btn is--default btn is--icon-only"><i class="material-icons md-24">add</i></button>
<button type="button" class="amui-a-btn is--default is--lg is--icon-only"><i class="material-icons md-24">add</i></button>
<button type="button" class="amui-a-btn is--default is--xl is--icon-only"><i class="material-icons md-36">add</i></button>