Search button
By adding .search-button
to <button>
it will be a button with search icon, it is useful when you want to create a search bar.
Accessibility matters!
You do not need to add anything inside the search button element but it is necessary to set an aria-label
HTML attribute for accessibility purposes. Read more about aria-label usage.
<button class="search-button" aria-label="Search"></button>
<button class="button search-button" aria-label="Search"/></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.
<button class="search-button" aria-label="Search"></button>
<button class="search-button size-lg" aria-label="Search"></button>
<button class="search-button size-2x" aria-label="Search"></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.
<button class="search-button style-success" aria-label="Search"></button>
<button class="search-button style-warning" aria-label="Search"></button>
<button class="search-button style-purple" aria-label="Search"></button>
<button class="search-button style-red" aria-label="Search"></button>
<button class="search-button color-success" aria-label="Search"></button>
<button class="search-button color-warning" aria-label="Search"></button>
<button class="search-button color-purple" aria-label="Search"></button>
<button class="search-button color-red" aria-label="Search"></button>
Change close icon
It is possible to change the search button icon with both _config.scss
and CSS variables.
Inside _config.scss
find $SEARCH_ICON
and set svg of customized icon with this format:
$SEARCH_ICON: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");
or
change its CSS variable:
--flatify__search-icon: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");