# How does the button component of the start kit work?

**URL:** <https://community.weweb.io/t/how-does-the-button-component-of-the-start-kit-work/16795>\
**Category:** Ask us anything\
**Created:** [February 24, 2025, 9:39am UTC](https://community.weweb.io/t/how-does-the-button-component-of-the-start-kit-work/16795 "2025-02-24T09:39:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\
**Post date:** [February 24, 2025, 9:39am UTC](https://community.weweb.io/t/how-does-the-button-component-of-the-start-kit-work/16795/1 "2025-02-24T09:39:30Z")

</div>

I was analysing the button component of the starter kit. Something I don’t understand is how the type swithc works. For example: When I choose a type the background is changing. Primary is Blue, Danger is red.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/74cda91740fa11b42737967a90da073c7999d044.png)

But when I check how this component is set up, I don’t see the background of the button is bound to something.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e527cdb1ad8c6ed186bb24c2077f232145778e77.png)

I noticed the default class is “button” and there are sub classes for typ-primary and type-danger, and that there are formula’s to switch background.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e3d17773cc62646d4490e3e39ae551222ed66392.png)

I also noticed that there are formulas defined to switch colors. But I don’t see how these are used?

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f76444eeed14f208c26e22043d3835f3416e1541.png)

So you does this work? Are subclasses dynamically set or something?

---

<div class="post-metadata">

**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\
**Post date:** [February 25, 2025, 2:54pm UTC](https://community.weweb.io/t/how-does-the-button-component-of-the-start-kit-work/16795/2 "2025-02-25T14:54:01Z")

</div>

Besides the question about the button component of the starterkit, I would like to know how to best setup a button component that should have the following functionality

- Upon hover, the alpha value of the current button color should be 80 of 100
- Being able to set a type: Success or Danger
  - If success, background should be green (upon hover: alpha of this green background should be 80)
  - If danger, should be green (upon hover: alpha of this green background should be 80)

I have defined several classes

- btn: default state = black button, white text \>
  - hover (subclass)=applicable when state: hover is active. In this class backround alpha is set to 80

- btn-success: Background of button is Green (alpha 100)
- btn-warning: Background of button is Red (alpha 100)

I was thinking to also add subclass hover to btn-success and btn-warning.

But how can I change class based on the (succes/danger) Type I select?

- When type = success add class btn-success (remove class btn-danger)
- When type = danger add class btn-danger (remove class btn-success)

Or should I drop the use of classes, and only use states (state:danger, state: success), but how can I combine that with state hover preserving the background color associated to success and danger state.

I also have a formula that switches background color based on the type (succes/danger) chosen in the component design options. I am able to bind that formula to the background color property, but (again) how can I combine that with state hover preserving the background color associated to success and danger state.

---

<div class="post-metadata">

**Author:** ![DanielL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/daniell/32/13398_2.png) [@DanielL](https://community.weweb.io/u/DanielL)\
**Post date:** [February 26, 2025, 6:21pm UTC](https://community.weweb.io/t/how-does-the-button-component-of-the-start-kit-work/16795/3 "2025-02-26T18:21:17Z")

</div>

Hi, the component was created to be as reusable as possible, that’s why it has so many settings.

I think it will be easier for you to understand it better if you simply take a look at component properties: [Advanced properties | WeWeb Documentation](https://docs.weweb.io/components/advanced-properties.html#states) and components in general and then experimenting with it.

---

<div class="post-metadata">

**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\
**Post date:** [February 27, 2025, 7:54am UTC](https://community.weweb.io/t/how-does-the-button-component-of-the-start-kit-work/16795/4 "2025-02-27T07:54:38Z")

</div>

Thanks. I understand the vision behind it. I checked again and I see the component is using states, to change color. My confusion behind is that I want to als have a specific hover effect.

Question: Is it possible to make the hover state context aware or make it act like a sub state? For example:

Based on type: success, the button uses the btn-success state giving it a green color. On hover state I want use a light green color because I already uses btn-success state

Based on type: danger, the button uses the btn-danger state giving it a red color. On hover state I want use a lighter red color because I already uses btn-danger state.