Styling āchipā buttons:
Distribution of buttons in a row:
![image](https://community-assets.home-assistant.io/original/4X/7/5/9/7590f0c96d694897a35ba259fb8343c84edbd246.png)
code
type: entities
title: distribution
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: flex-end;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: space-between;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: space-evenly;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: space-around;
}
Distribution for all rows (same method may be used for other styles):
![ŠøŠ·Š¾Š±ŃŠ°Š¶ŠµŠ½ŠøŠµ](https://community-assets.home-assistant.io/original/4X/c/9/c/c9c19436c18e89b413bd15e55eb190950a5e0f19.png)
code
type: entities
title: distribution for all rows
entities:
- &ref_buttons
type: buttons
entities:
- &ref_button
entity: sun.sun
show_name: true
show_icon: true
- *ref_button
- *ref_button
- *ref_button
- *ref_buttons
- *ref_buttons
card_mod:
style:
hui-buttons-row:
$ hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
}
Colored background, border & text, rectangular shape (for all buttons and for some button), 3D-shape (+ changed styles on hover & select):
code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
--ha-assist-chip-filled-container-color: yellow;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip:nth-child(3) {
--ha-assist-chip-filled-container-color: yellow;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
--ha-assist-chip-filled-container-color: yellow;
--_label-text-color: red;
border: 1px solid cyan;
border-radius: 4px;
--_label-text-weight: 800;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
--_focus-label-text-color: cyan;
--_hover-label-text-color: white;
--_pressed-label-text-color: green;
--_hover-state-layer-color: red;
--_hover-state-layer-opacity: 0.5;
--_pressed-state-layer-color: cyan;
--_pressed-state-layer-opacity: 0.5;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) ) !important;
}
before 2023.12
Code
type: entities
title: colors & shape
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style: |
:host {
--ha-chip-background-color: yellow;
--ha-chip-text-color: red;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar: |
ha-chip:nth-child(3) {
--ha-chip-background-color: yellow;
--ha-chip-text-color: red;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
border: 1px solid red !important;
border-radius: 4px !important;
}
.mdc-chip__ripple {
border-radius: 4px !important;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:nth-child(3):
$: |
.mdc-chip {
border: 1px solid red !important;
border-radius: 4px !important;
}
.mdc-chip__ripple {
border-radius: 4px !important;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) ) !important;
border-radius: 4px !important;
}
.mdc-chip__ripple {
border-radius: 4px !important;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) ) !important;
border-radius: 4px !important;
--ha-chip-background-color: transparent;
}
.mdc-chip__ripple {
border-radius: 4px !important;
}
Colored icon:
![ŠøŠ·Š¾Š±ŃŠ°Š¶ŠµŠ½ŠøŠµ](https://community-assets.home-assistant.io/original/4X/0/4/f/04f92a31b165aecaf4cabee1f4d7dc368561ee78.png)
code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sensor.processor_use
name: sensor
show_name: true
show_icon: true
- entity: binary_sensor.service_off_value
name: 'binary_sensor: off'
show_name: true
show_icon: true
- entity: binary_sensor.service_on_value
name: 'binary_sensor: on'
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip:nth-child(1) {
--state-sun-below_horizon-color: green;
--state-sun-above_horizon-color: magenta;
}
ha-assist-chip:nth-child(2) {
--secondary-text-color: red;
}
ha-assist-chip:nth-child(n+3) {
--state-binary_sensor-on-color: green;
--state-binary_sensor-off-color: cyan;
}
before 2023.12
![image](https://community-assets.home-assistant.io/original/4X/c/a/1/ca175757e5171a9cb5c0f9d92954f967b55c4119.png)
Code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sensor.cleargrass_1_co2
show_name: true
show_icon: true
- entity: binary_sensor.service_off_value
show_name: true
show_icon: true
- entity: binary_sensor.service_on_value
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style: |
:host {
--paper-item-icon-active-color: magenta;
--secondary-text-color: cyan;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar: |
ha-chip:nth-child(3) {
--paper-item-icon-active-color: magenta;
--secondary-text-color: cyan;
}
Changed width:
![ŠøŠ·Š¾Š±ŃŠ°Š¶ŠµŠ½ŠøŠµ](https://community-assets.home-assistant.io/original/4X/9/c/3/9c3060c694c7d31f9ee6d0212b6e3533f395e3f2.png)
code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: zone.home
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
width: 110px;
}
before 2023.12
![image](https://community-assets.home-assistant.io/original/4X/3/3/4/3346b3a5c7a57f49891a3c6d4a0cd449ed374773.png)
Code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sensor.cleargrass_1_co2
show_name: true
show_icon: true
name: CO2 value
- entity: zone.home
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip span {
width: 60px;
}
hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
}
Changed width + centered icon & text:
![ŠøŠ·Š¾Š±ŃŠ°Š¶ŠµŠ½ŠøŠµ](https://community-assets.home-assistant.io/original/4X/d/1/7/d17d810c348b657d2debac0267010f5e4b822dbf.png)
code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sensor.xiaomi_cg_1_co2
show_name: true
show_icon: true
name: CO2
- entity: zone.home
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ ha-assist-chip:
$: |
.container {
justify-content: center;
}
.: |
ha-assist-chip {
width: 120px;
}
before 2023.12
![image](https://community-assets.home-assistant.io/original/4X/4/d/0/4d0276a179e078ef9c77ce86b436409fef0732fb.png)
Code
type: entities
title: centered icon & text
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sensor.cleargrass_1_co2
show_name: true
show_icon: true
name: CO2
- entity: zone.home
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
width: 120px;
justify-content: center;
}
Disabling a button:
![ŠøŠ·Š¾Š±ŃŠ°Š¶ŠµŠ½ŠøŠµ](https://community-assets.home-assistant.io/original/4X/b/e/7/be7d74143104350149b062fcd0e2729c0ad728be.png)
code
type: entities
entities:
- entity: input_boolean.test_boolean
name: disable
- type: buttons
entities:
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip:nth-child(2) {
{% if is_state('input_boolean.test_boolean','on') %}
pointer-events: none;
opacity: 0.2;
{% endif %}
}
More examples are described here.