Arrow button

By adding .arrow-button to <button> it will be a button with the arrow icon, if you add the .arrow-flip class to the arrow button it will be flipped horizontally or vertically. These are supported classes to change the arrow direction.

.arrow-top
.arrow-bottom (as default)
.arrow-right
.arrow-left

Accessibility matters!

It is not necessary to add text inside the arrow button element but you should set an aria-label HTML attribute for accessibility purposes. Read more about aria-label usage.

index.html

<button class="button arrow-button" aria-label="Arrow button"/></button>
<button class="button arrow-button arrow-top" aria-label="Arrow button"/></button>
<button class="button arrow-button arrow-left" aria-label="Arrow button"/></button>
<button class="button arrow-button arrow-right" aria-label="Arrow button"/></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="button arrow-button size-xs" aria-label="Arrow button"></button>
<button class="button arrow-button size-lg" aria-label="Arrow button"></button>
<button class="button arrow-button size-2x" aria-label="Arrow button"></button>
<button class="button arrow-button size-3x" aria-label="Arrow button"></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="button arrow-button style-success" aria-label="Arrow button"></button>
<button class="button arrow-button style-warning" aria-label="Arrow button"></button>
<button class="button arrow-button style-purple" aria-label="Arrow button"></button>
<button class="button arrow-button style-red" aria-label="Arrow button"/></button>

<button class="button arrow-button color-success" aria-label="Arrow button"></button>
<button class="button arrow-button color-warning" aria-label="Arrow button"></button>
<button class="button arrow-button color-purple" aria-label="Arrow button"></button>
<button class="button arrow-button color-red" aria-label="Arrow button"></button>

Change arrow icon

It is possible to change the arrow button icon with both _config.scss and CSS variables.

Inside _config.scss find $ARROW_DOWN_ICON and set svg of customized icon with this format:

_config.scss

$ARROW_DOWN_ICON: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");

or

change its CSS variable:

style.css

--flatify__arrow-down-icon: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");