×

Element Settings: Button Style

Modified on Mon, 20 Nov, 2023 at 2:23 PM

The Button Style setting allows you to select a pre-configured style from your Styleguide or to customize the element independently. This includes settings like color, font, border, and more. Some settings can be set for specific Button States separately. When configuring the Style, it is easiest to think of a Button as three separate components; the Button container itself, the Primary Text, and the Sub Text.

Requirements: 


Table of Contents:


Style:

Selecting one of the numbers will load the preconfigured settings from your Styleguide. However, choosing the three-dot button will allow you to customize this specific button independently.

Important Note: To customize the preconfigured settings, do so in your Styleguide by clicking the Edit Style button.

Back to Top


Button States:

Three Style settings can be changed for each button state. Those settings are:

Important Note: Please see this article for more information about Button States.

Back to Top


Button (Container) Component:

When thinking of the three components of a Button, these settings affect the Button around and behind the Primary Text and Sub Text.

  • Background: The color of the button. This setting is configured for each Button State.
  • Border: The border around the button. See this article for more details about Border settings.
  • Corner: Control the roundness of the corners. See this article for more details about Corner settings.
  • Shadow: Configure a shadow for the button. See this article for more details about Shadow settings.

Back to Top


Primary Text Component:

The Primary Text component displays the Button Text configured in the Button Config settings. The following settings affect the Primary Text for the button.

  • Text Color: The color of the Primary Text. This setting is configured for each Button State.
  • Primary Text Style: Font settings for Primary Text. See this article for more details about Typography settings found here.
  • Primary Text Shadow: Configure the shadow for the Primary Text. See this article for more details about Text Shadow settings.
  • Icon Before: Display an icon before the Primary Text. See this article for more details about Icon Before settings.
  • Icon After: Display an icon after the Primary Text. See this article for more details about Icon After settings.

Back to Top


Sub Text Component:

The Sub Text component displays the Sub Text configured in the Button Config settings. The following settings affect the Sub Text for the button.

Important Note: Sub Text Style settings appears once you have entered a subtext in the Button Config settings.

  • Sub Text Color: The color of the Sub Text. This setting is configured for each Button State.
  • Sub Text Style: Font settings for the Sub Text. See this article for more details about Typography settings found here.
  • Sub Text Shadow: Configure the shadow for the Sub Text. See this article for more details about Text Shadow settings.

Back to Top


Supported Elements:

This setting can be found in the following elements: 

Back to Top

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article