Add button

By adding .add-button to <button> it will be a button with a plus sign, you can use this component for menus or other interactive elements. .active class will change plus to minus.

Accessibility matters!

You do not need to add anything inside the add button element but it is necessary to set an aria-label HTML attribute for accessibility purposes. Read more about aria-label usage.

index.html

<button class="add-button" aria-label="Add"/></button>
<button class="add-button active" aria-label="Remove"/></button>

Sizes

To change the button size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<button class="add-button size-xs" aria-label="Add"></button>
<button class="add-button size-lg" aria-label="Add"></button>
<button class="add-button size-2x" aria-label="Add"></button>
<button class="add-button size-3x" aria-label="Add"></button>

Colors

There are helper classes for styling elements like button, first read about color setter classes for having button with diffrent background and text color.

index.html

<button class="add-button color-success" aria-label="Add"></button>
<button class="add-button color-warning" aria-label="Add"></button>
<button class="add-button color-purple" aria-label="Add"></button>
<button class="add-button color-red" aria-label="Add"></button>