Buttons

components/ui/_buttons.scss

Buttons comes as a flexbox component with its modifiers. Buttons class names work on <button>, <a> and <input type="submit"> tags.

link

Colors

Color modifier class name .mod-[colorName]

Plain

Translucid





Sizes

Size modifier class name .mod-[sizeName]

Wide and narrow

It is possible to enlarge or straighten current button size, by overriding left and right paddings, useful in some cases, with .mod-wide and .mod-narrow



Corners

Corners - Border radius - modifier class name .mod-[cornerName]

Tabulation

Tabulation style modifier class name .mod-tab











Sticker

Fully rounded button with forced 1:1 aspect ratio and centered content .mod-sticker[-sizeName]

Display block

Display button as 100% width block with the following modifier class name .mod-block

.mod-block has its own text alignment property $btn-default-mod-block-text-align:

  • spaced Text is aligned left. Including another HTML tag makes the remaining space distributed between the items.
  • left Text is aligned left. Including another HTML tag makes it pushed towards the start of the button’s main axis.
  • center Text is aligned centered. Including another HTML tag makes it centered along the button’s main axis.
  • right Text is aligned right. Including another HTML tag makes it pushed towards the end of the button’s main axis.

Responsive column mode

.mod-column[-screenName] responsive modifier allows to display button content as vertical flow.

Disabled mode

Button supports disabled attribute and can also be set with the following modifier class name .disabled

Active mode

Button supports an active status for various usages. Just set with the following modifier class name .active

Combinations