(How) Can I change the font color of a disabled button in F# Fable Elmish?

Question

i tried setting the Color via Style-Color, but it only changes the Color when it's not disabled. Is there a possibility with or without using Fulma?

Button.button
    [
        Button.Disabled true
        Button.Props [
            Style [ Color "#000000" ] ]
        //if … then
        Button.OnClick (fun _ -> dispatch Msg)
    ]
    [ str "Text here" ]

As a last Resort I'd use an if-condition with the dispatch function and in this way putting the button to no use.

Thanks in advance.

score 3 · Accepted Answer · answered Jul 27 '19 at 06:45

@nilekirk solution is indeed the correct way to do it using inlined style.

But if you have a lot of button in your application, it can make the code really verbose quickly.

Another solution is to apply some CSS directly to all the disabled button or if you don't want this behavior for all your button you can add a custom class.

Apply to all the button of the application

CSS code:

.button[disabled] {
    background-color: black !important;
}

F# code:

Button.button
    [
        Button.Disabled true
        Button.OnClick (fun _ -> dispatch Msg)
    ]
    [ str "Text here" ]

Use a custom class to select which button should have this behavior

CSS code

.button.custom-disabled[disabled] {
    background-color: black !important;
}

F# code

Button.button
    [
        Button.CustomClass "custom-disabled"    
        Button.Disabled true
        Button.OnClick (fun _ -> dispatch Msg)
    ]
    [ str "Text here" ]

thank you, this works. To make it a little more complicated: is it possible for the font to not look as it were disabled (the color looks still a little bit off, when disabled) — Einhorni, Jul 29 '19 at 12:37
If you including Bulma using scss you can set the `$button-disabled-opacity` to 1. If not, you can set the `opacity` to 1 using css. By default, it's 0.5. — Maxime Mangel, Jul 29 '19 at 14:17
with additional using the line: @import "./../../node_modules/bulma/sass/elements/button"; it works. Thanks! — Einhorni, Jul 29 '19 at 15:46

nilekirk · Answer 2 · 2019-07-26T18:22:12.197

2

If you want to change the font color only for the disabled case, you can yield a new style for this:

Button.button
    [
        Button.Disabled isDisabled
        Button.Props [
            if isDisabled then yield Style [ Color "#000000" ] ]
        Button.OnClick (fun _ -> dispatch Increment)
    ]
    [ str "Text here" ]

If you want to have different colors depending on disabled state, you can use an if-then-else expression:

Button.button
    [
        Button.Disabled isDisabled
        Button.Props [
            Style [ (if isDisabled then Color "#000000" else Color "#ffffff") ] ]
        Button.OnClick (fun _ -> dispatch Increment)
    ]
    [ str "Text here" ]

edited Jul 26 '19 at 18:22

answered Jul 26 '19 at 17:32

nilekirk

2,353
1
8
9

Hi, thanks for the hint but I accidentely removed the bool after Disabled when editing the code for the post. It works but I want to change the color of the font in the disabled state – Einhorni Jul 26 '19 at 18:00
Excuse me for asking, but where and how is isDisabled defined? VS tells me, that ist not defined – Einhorni Jul 29 '19 at 12:29
isDisabled is a boolean you define - most likely, it belongs to your model. – nilekirk Jul 29 '19 at 13:37

(How) Can I change the font color of a disabled button in F# Fable Elmish?

2 Answers2