Buttons - Decidim Design Guide

Sizes

Button	Classes
	button button__primary button__xs
	button button__primary button__sm
	button button__primary button__lg
	button button__primary button__xl

Source code on GitHub: decidim-core/app/cells/decidim/button

<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__primary button__xs" }) %>
<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__primary button__sm" }) %>
<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__primary button__lg" }) %>
<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__primary button__xl" }) %>

Colors

Button	Classes
	button button__lg button__primary
	button button__lg button__secondary
	button button__lg button__tertiary

Source code on GitHub: decidim-core/app/cells/decidim/button

<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__lg button__primary" }) %>
<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__lg button__secondary" }) %>
<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__lg button__tertiary" }) %>

Transparent

Button	Classes
	button button__lg button__transparent-primary
	button button__lg button__transparent-secondary
	button button__lg button__transparent-tertiary

Source code on GitHub: decidim-core/app/cells/decidim/button

<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__lg button__transparent-primary" }) %>
<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__lg button__transparent-secondary" }) %>
<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__lg button__transparent-tertiary" }) %>

In case of a darker background:

Button	Classes
	button button__lg button__transparent

Source code on GitHub: decidim-core/app/cells/decidim/button

<%= cell("decidim/button", { text: "Send" }, { button_classes: "button button__lg button__transparent" }) %>

Text

Button	Classes
	button button__lg button__text
	button button__lg button__text-primary
	button button__lg button__text-secondary
	button button__lg button__text-tertiary

Source code on GitHub: decidim-core/app/cells/decidim/button

<%= cell("decidim/button", { text: Send }, { button_classes: "button button__lg button__text" }) %>
<%= cell("decidim/button", { text: Send }, { button_classes: "button button__lg button__text-primary" }) %>
<%= cell("decidim/button", { text: Send }, { button_classes: "button button__lg button__text-secondary" }) %>
<%= cell("decidim/button", { text: Send }, { button_classes: "button button__lg button__text-tertiary" }) %>

Icons

Button	Classes
	button button__lg button__secondary
	button button__lg button__transparent-secondary

Source code on GitHub: decidim-core/app/cells/decidim/button

<%= cell("decidim/button", { text: Send, icon: "question-line" }, { button_classes: "button button__lg button__secondary" }) %>
<%= cell("decidim/button", { text: Send, icon: "question-line" },
                    { button_classes: "button button__lg button__transparent-secondary" }) %>

Disabled

Button	Classes
	`disabled` data-attribute present

Source code on GitHub: decidim-core/app/cells/decidim/button

<%= cell("decidim/button", { text: Send },
                  { button_classes: "button button__lg button__secondary", html_options: { disabled: true } }) %>