Amara styleguide


Options

Use any of the available button classes to quickly create a styled button.
 .small - Small sized button
 .block - Full width button
 .cta  - Call-to-action button.  Displayed with a plum color.  A typical use for this is the buttons to create subtitles
 .cta-reverse  - Reversed call-to-action button.  Used for delete, remove, etc.
 .borderless  - borderless button.  Used for cancelation, deselection, etc.
 .inline  - inline button
 .disabled  - A disabled button

Example

<button type="button" class="button $modifier_class">Click me</button>

Default style

.smallSmall sized button

.blockFull width button

.blockLeftLeft-aligned full width button. Good for displaying buttons in a list.

.ctaCall-to-action button. Displayed with a plum color. A typical use for this is the buttons to create subtitles

.cta-reverseReversed call-to-action button. Usually used for cancel

.secondaryDisplayed for secondary actions when a Call-to-action is already displayed. Can be use for cancel

.deleteCTA used for delete, remove, etc.

.borderlessborderless button. Used for cancelation, deselection, etc.

.inlineinline button

.disabledA disabled button