UI Atoms

Buttons

1.1 Buttons colors

Link
<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>