Topic: Change color of button

Palak@tru free asked 3 years ago

I have to apply color-"indigo accent-4" to the button using the color property. When I use "indigo" it is changing the color of the button into indigo but when I use "indigo accent-4" , it gets back into transparent.

Konrad Stępień staff answered 3 years ago

Hi @Palak@tru,

If you wanna use accent and other colours from the palette you have to set the colour property and className for the button.

For example:

<MDBBtn color="indigo" className="indigo accent-4">Button</MDBBtn>

Because color property sets styles only for MDBBtn (hover, focus etc.) and colours from the palette change colours for any elements where you use the class.

if you have additional problems, I will be happy to help.

Your regards, Konrad.

PalakJ free commented 3 years ago

Thanks for your reply! But I want to add above color to the outline only . When I use the method described by you, it fills the button along with the outline. I want a transparent background and color applied to the outline only.

Konrad Stępień staff commented 3 years ago

You interesting something like this? enter image description here

if that's what you mean, it's a component for the pro version. If you use an only free version and you want to stay with it, you should make you own styles for button and set className for button.

PalakJ free commented 3 years ago

I am using the paid version only . When I am using "accent-4" in classname, to use a different shade of the color, it fills the button with that color instead of just changing just the outline.

Konrad Stępień staff commented 3 years ago

You're probably interested in something like that:

<MDBBtn outline color="indigo">Button</MDBBtn>

And I see that accent-4 does not work on outline elements. Because it has different properties then.

Maybe this code is be the best way to use in your project?

<MDBBtn outline color="blue">Button</MDBBtn>

But I encourage you to look at this documentaction and api tab how you can style your buttons or you can also copy finished examples.

Best, Konrad.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.17.0
  • Device: MacBookAir
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: No