• CSS
• Layout
• Typography
• Buttons
• Form elements
• Images
• Pagination
• Badges

Buttons

In ZoaUI, buttons can have different radii, sizes and colors, be inline or block, and be grouped with other buttons.

New in v0.1.4: support for ghost buttons has been added.

Buttons with different radii & colors

I am a button Button Error Success Info Link button Some text

<p>
    <button class="zo-btn zo-btn--default">I am a button</button>
    <button class="zo-btn zo-btn--primary">Button</button>
    <button class="zo-btn zo-btn--error">Error</button>
    <button class="zo-btn zo-btn--success">Success</button>
    <button class="zo-btn zo-btn--info">Info</button>
    <a href="#" class="zo-btn zo-btn--primary" role="button">Link button</a>
    Some text
</p>

Button with radius Button Error Success Info

<button class="zo-btn zo-btn--default zo--radius">
    Button with radius
</button>

Rounded button Button Error

<button class="zo-btn zo-btn--default zo--round">
    Rounded button
</button>

Buttons with different sizes

Buttons can have 3 different sizes—small, medium and large.

Small Medium Large

<p>
    <button class="zo-btn zo--radius zo-btn--primary zo-btn--s">Small</button>
    <button class="zo-btn zo--radius zo-btn--primary">Medium</button>
    <button class="zo-btn zo--radius zo-btn--primary zo-btn--l">Large</button>
</p>

Compressed buttons

Compressed buttons have reduced paddings in some or all directions, and therefore can fit into a tighter space.

Vertically compressed Compressed left Compressed right Compressed

<button class="zo-btn zo-btn--primary zo-btn--compressed">
    Vertically compressed
</button>
<button class="zo-btn zo-btn--primary zo-btn--compressedLeft">
    Compressed left
</button>
<button class="zo-btn zo-btn--primary zo-btn--compressedRight">
    Compressed right
</button>
<button class="zo-btn zo-btn--primary zo-btn--compressedAll">
    Compressed
</button>

Block-level buttons

Button

<button class="zo-btn zo-btn--primary zo-btn--block">Button</button>

Button grouping

Buttons can also be grouped horizontally or vertically.

Button Primary Success Error

<span class="zo-btnGroup">
    <button class="zo-btn zo-btn--default zo-btnGroup__btn zo--radiusLeft">Button</button>
    <button class="zo-btn zo-btn--primary zo-btnGroup__btn">Primary</button>
    <button class="zo-btn zo-btn--success zo-btnGroup__btn">Success</button>
    <button class="zo-btn zo-btn--error zo-btnGroup__btn zo--radiusRight">Error</button>
</span>

Button Primary Success Error

<span class="zo-btnGroup zo-btnGroup--vertical">
    <button class="zo-btn zo-btn--default zo-btn--block zo-btnGroup--vertical__btn zo--radiusTop">Button</button>
    <button class="zo-btn zo-btn--primary zo-btn--block zo-btnGroup--vertical__btn zo-btn--block">Primary</button>
    <button class="zo-btn zo-btn--success zo-btn--block zo-btnGroup--vertical__btn">Success</button>
    <button class="zo-btn zo-btn--error zo-btn--block zo-btnGroup--vertical__btn zo--radiusBottom">Error</button>
</span>

Button Primary Success Error

<span class="zo-btnGroup zo-btnGroup--block">
    <button class="zo-btn zo-btn--default zo-btn--block zo-btnGroup--block__btn zo--radiusTop">Button</button>
    <button class="zo-btn zo-btn--primary zo-btn--block zo-btnGroup--block__btn zo-btn--block">Primary</button>
    <button class="zo-btn zo-btn--success zo-btn--block zo-btnGroup--block__btn">Success</button>
    <button class="zo-btn zo-btn--error zo-btn--block zo-btnGroup--block__btn zo--radiusBottom">Error</button>
</span>

Split buttons

Buttons can be split by splitters, which might be useful with, for example, dropdowns.

Do something Follow 233

<button class="zo-btn zo-btn--primary zo--radius">
    Do something
    <span class="zo-btn__splitter"></span>
    <span class="zo-triangle zo-triangle--down"></span>
</button>

Ghost buttons

Ghost buttons are great for call-to-action buttons covering an image.

Ghost button Primary Success Error Info

Inverted Info Success Error

<p>
    <a href="#" role="button" class="zo-ghostBtn">Ghost button</a>
    <a href="#" role="button" class="zo-ghostBtn zo--round zo-ghostBtn--primary">Primary</a>
    <a href="#" role="button" class="zo-ghostBtn zo--radius zo-ghostBtn--success">Success</a>
    <a href="#" role="button" class="zo-ghostBtn zo--round zo-ghostBtn--error">Error</a>
    <a href="#" role="button" class="zo-ghostBtn zo--radius zo-ghostBtn--info">Info</a>
</p>
<p style="background:#555;padding:1em">
    <a href="#" role="button" class="zo-ghostBtn zo--round zo-ghostBtn--inverted">Inverted</a>
    <a href="#" role="button" class="zo-ghostBtn zo--round zo-ghostBtn--info">Info</a>
    <a href="#" role="button" class="zo-ghostBtn zo--radius zo-ghostBtn--success">Success</a>
    <a href="#" role="button" class="zo-ghostBtn zo--round zo-ghostBtn--error">Error</a>
</p>