Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Radio Toggle Button Outline

web_ntx premium asked 3 years 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 3 years ago


Hi!

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

Keep coding!


web_ntx premium commented 3 years 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 3 years 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 3 years 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 3 years 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No