πŸ”˜How to style hover, selected, disabled button states

Buttons can have different styles for different states. Here you'll learn how to give them a unique style for their 3 most common states.

Select the button to style:

  1. In the β€œEdit” sub-menu open the β€œDesigner” card.

  2. Select the button or options buttons you want to style.

Specific button state styling:

  1. Click "+ Sub-Elements".

  2. Select the part of the component you want to style in the Options Selector. It could be "Button" or maybe you want to style the β€œCheckbox”. For single Button components, it would be "Whole Thing".

  3. Click "+ Filter".

  4. Select the β€œWhen” option that matches the button state you want to style e.g. "selected", β€œdisabled”, or β€œhover”.

  5. Any styles you set now, would only be visible when the button has the state you’ve chosen.

Easy wasn’t it?! πŸ™‚

Disabled button styling:

πŸ’‘ For a button to show its disabled style, the button should have been set as disabled. The most common button disabled use is for a β€œnext” button to be disabled if the page requirements had not been met. E.g. you need to provide your email address before continuing to the next page. Of course, also the email input should be configured as β€œrequired”.

Last updated