Customizing Button Styles - HL Vanilla Community
<main> <article class="userContent"> <p>Your site's buttons are often an important part of your brand. Because of this, we offer a lot of control over the look of your buttons.</p><h2 data-id="types-of-buttons">Types Of Buttons</h2><p>There are two types of buttons you'll normally theme: primary and standard.</p><p><strong>Primary</strong> buttons are used as the primary action on most forms. Usually they use your brand color, but can also be styled to just stand out in general. Primary buttons are styled with variables starting with <code class="code codeInline" spellcheck="false" tabindex="0">buttonClasses.primary</code>.</p><p><strong>Standard</strong> buttons are for all other form buttons. They should just appear normal, but still look like buttons. Standard buttons are styled with variables starting with <code class="code codeInline" spellcheck="false" tabindex="0">buttonClasses.standard</code>.</p><h2 data-id="button-style-presets">Button Style Presets</h2><p>There are lots of variables that you can use to style buttons. In fact, setting all of the variables can become more complex than is necessary for most themes. That's where presets come in.</p><p>When theming your buttons you want to choose a style preset first, and then you choose options for that preset. Consider a preset a quick way to choose the overall look of a button.</p><p>There are three button presets: solid, outline, and advanced.</p><h3 data-id="solid-buttons">Solid Buttons</h3><p>Solid buttons have a solid background color and text color.</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">preset = "solid"</code>. Set preset to solid for the button.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">colors.bg</code>. The background color of the button.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">colors.fg</code>. The foreground (text) color of the button.</li></ul><h3 data-id="outline-buttons">Outline Buttons</h3><p>Outline buttons have a 1px border and text, but no background.</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">preset = "outline"</code>. Set preset to outline for the button.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">colors.bg</code>. The border color of the button.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">colors.fg</code>. The text color of the button.</li></ul><h3 data-id="advanced-buttons">Advanced Buttons</h3><p>When you want more control over the appearance of your buttons you use the advanced preset. This has many more variables.</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">preset = "advanced"</code>. Set the preset to advanced for the button.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">colors.bg</code>. The background color of the button.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">colors.fg</code>. The foreground color of the button.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">borders.color</code>. The button's border color.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">state</code>. You control the hover, active, and other states of the button with this variable. It supports <code class="code codeInline" spellcheck="false" tabindex="0">state.colors.bg</code>, <code class="code codeInline" spellcheck="false" tabindex="0">state.colors.fg</code>, and <code class="code codeInline" spellcheck="false" tabindex="0">state.borders.color</code>.</li></ul><h2 data-id="putting-it-all-together">Putting It All Together</h2><p>Here is an example of a solid blue primary button and a grey outline standard button. This is expressed as JSON and would be suitable as an API call.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">{ "buttonClasses": { "primary": { "preset": "solid", "colors": { "bg": "#2979ff", "fg": "#ffffff" } }, "standard": { "preset": "outline", "colors": { "bg": "#777777", "fg": "#555555" } } } } </pre> </article> </main>