Menu icon Foundation
How to change badge background color?

Hi,

If I want to change the success badge background color (.badge.succes), where would I do it? I've tried editing this in _settings.scss:

// 9. Badge

// --------



$badge-background: #000000; // my edit... black only for testing
$badge-color: foreground($badge-background);

But that doesn't work...

 

 

scsscssfoundation 6badge

Hi,

If I want to change the success badge background color (.badge.succes), where would I do it? I've tried editing this in _settings.scss:

// 9. Badge

// --------



$badge-background: #000000; // my edit... black only for testing
$badge-color: foreground($badge-background);

But that doesn't work...

 

 

Rafi Benkual over 3 years ago

The color palette controls the default colors like success, secondary, alert.

$foundation-palette: (
  primary: #2199e8,
  secondary: #777,
  success: #3adb76,
  warning: #ffae00,
  alert: #ec5840,
);

If you change the color in the badge settings, it will change the default color for all the badges. But if you use a modifier class like success, it will pull from the palette.