Dropdowns color badges - add outline badges

[Peter]

I sometimes feel that badges are a bit unfriendly.
With buttons you have the option of choosing outline, which is better for the eyes imho.

You could expand this notion to the badges for dropdowns, or even the filter tabs in lists/tables.

Just a suggestion.

[Marty]

You can do this in CSS.
Each selection color option will have its own class like “badge-wh-2” or badge-bk-4" so you can manipulate them individually.

.badge {
    background-color: transparent;
    border: 1px solid #fff;
}

[Peter]

Thanks for that.

I do think though that we should have a nocode solution. It is possible for buttons, so why not make it possible for tabs and badges as well?

[Peter]

I have done this in my application custom header CSS tab in the settings.
Here is the code:

.badge-wh-1 {
    color: #7B3CEC;
    background-color: transparent;
    border: 1px solid #7B3CEC; 
}

.badge-wh-2 {
    color: #25C836;
    background-color: transparent;
    border: 1px solid #25C836; 
}

.badge-wh-3 {
    color: #1EBEFF;
    background-color: transparent;
    border: 1px solid #1EBEFF; 
}

.badge-wh-4 {
    color: #FF6F30;
    background-color: transparent;
    border: 1px solid #FF6F30; 
}

.badge-wh-5 {
    color: #F82F60;
    background-color: transparent;
    border: 1px solid #F82F60; 
}

.badge-wh-6 {
    color: #8A48FF;
    background-color: transparent;
    border: 1px solid #8A48FF; 
}

.badge-wh-7 {
    color: #FF10C1;
    background-color: transparent;
    border: 1px solid #FF10C1; 
}

.badge-wh-8 {
    color: #FCB303;
    background-color: transparent;
    border: 1px solid #FCB303; 
}

.badge-wh-9 {
    color: #317EF9;
    background-color: transparent;
    border: 1px solid #317EF9; 
}

.badge-wh-10 {
    color: black;
    background-color: transparent;
    border: 1px solid #001;

You will only see this in your live application. In the builder you still have to chose the full-colour ones.

Result: