ALF Buttons

Buttons can either be:

  • Elements with the class .button
  • A container with the class .buttons, with any of the following elements inside:
    • a
    • button
    • input[submit]
    • input[reset]

By default buttons will fill 100% width in phone, but that can be prevented by adding .not-responsive.

Container .buttons classes

  • .justify
  • .center
  • .right
  • .in-bar: visually wraps the buttons in a styled bar
  • .not-responsive: prevents the buttons using 100% of the available width in phone-down

Button classes

  • Color identifiers: .main, .alt, .ok, .warning, .error
  • Additional colors: .link, .text
  • .disabled: you should also add the disabled attribute when it's an INPUT element
  • Size classes: xs, s, l, xl
  • .w100: uses the full available width
  • .outlined

Examples

Element with .button

In this paragraph there is a link with class button.

Buttons container (class .buttons)

Link

Container options

Justified (.buttons.justify):

Link

Centered (.buttons.center):

Link

Right-aligned (.buttons.right):

Link

In-bar (.buttons.in-bar):

Link

Alignment + in-bar combinations (.buttons.justify.in-bar):

Link

Not responsive (.buttons.justify.in-bar.not-responsive):

Link

Additional classes (in the button elements)

.w100

LINK.w100
.main .alt .ok .warning .error .link .text .disabled
.l .l.main .l.alt .l.ok .l.warning .l.error .link .text .l.disabled
.xl .xl.main .xl.alt .xl.ok .xl.warning .xl.error .link .text .xl.disabled
.s .s.main .s.alt .s.ok .s.warning .s.error .link .text .s.disabled
.xs .xs.main .xs.alt .s.ok .xs.warning .xs.error .link .text .xs.disabled

Outlined versions

All combinations with color identifiers are possible, showing just a sample below:

.outlined .outlined.main .outlined.alt .outlined.ok .outlined.warning .outlined.error .outlined.link .outlined.text .outlined.disabled
.outlined.l .outlined.l.disabled
.outlined.xl .outlined.xl.disabled
.outlined.s .outlined.s.disabled
.outlined.xs .outlined.xs.disabled