Create CustomUI Cards and Badges

[Fabian02]

Hello everyone,

I’m new to creating my own components in Home Assistant and I’ve been working on a custom Badge for my dashboard to display a weather entity.

I followed this guide: Custom Badge

For the graphical badge configuration, I used the Built-in form editor via the getConfigForm() function, and it works fine so far.

Now I want to add a tap action:

Is there any detailed documentation that lists all available schema properties for the config form, so I can replicate this behavior myself?

tried adding the following snippet, but it doesn’t seem to work correctly

      { name: "tap_action", selector: { action: {} }

Also, does anyone know how to recreate this accordion-style menu in the form editor?

And lastly, how can I access the Translations for entity states (e.g. to show localized state names in the badge)?

Thanks in advance for any pointers or documentation links!

[Mindreader]

You are right this getConfigForm() is not well documented. I am also struggling with this part of the documentation.

Regarding the collapsible sections, you can use expandable

            // Font Sizes
            {
                type: 'expandable',
                label: 'font.sizes',
                icon: 'mdi:format-size',
                schema: [
                    {
                    name: "title_font_size",
                    selector: { number: { min: 8, max: 30, step: 1 } },
                    default: 16
                    },
                    {
                    name: "cat_font_size",
                    selector: { number: { min: 8, max: 30, step: 1 } },
                    default: 16
                    },
                    {
                    name: "list_font_size",
                    selector: { number: { min: 8, max: 30, step: 1 } },
                    default: 14
                    },
                    {
                    name: "chip_font_size",
                    selector: { number: { min: 8, max: 30, step: 1 } },
                    default: 12
                    }
                ]
            },