Radio Toggle Button Outline

Topic: Radio Toggle Button Outline

web_ntx premium asked a year ago

How do we apply buttons styles to the radio toggle buttons in React 5 MDB? For example, I would like to use the outline button style.

Krzysztof Wilk staff answered a year ago


You can use the btnColor property to achieve that. Pass to it, for example, 'outline-secondary' value :)

Keep coding!

web_ntx premium commented 12 months ago

Unfortunately this does not work. This changes the background color of the button but does not apply the outline style.

Krzysztof Wilk staff commented 11 months ago

It applies an outline style for the radio that isn't checked. The behavior you mentioned above describes a selected radio.

web_ntx premium commented 11 months ago

Thank you, actually, the issue was that I used btnColor="outline" when I needed to use btnColor="outline-primary". One additional note: the active radio button has dark text color instead of the usual white by default. As I quick fix, I added this to mdb-react-ui-kit/scss/custom/_styles.css:

.btn-check:checked+.btn-outline-primary {
  color: #FFF;

Krzysztof Wilk staff commented 11 months ago

Thanks for that suggestion. We'll discuss it and if this idea pass - we will correct it in one of the next releases :)

Keep coding!

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: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No