diff --git a/src/Badge.js b/src/Badge.js
index 82ebcd523..22a9ec910 100644
--- a/src/Badge.js
+++ b/src/Badge.js
@@ -33,8 +33,8 @@ const Badge = (props) => {
const classes = mapToCssModules(classNames(
className,
'badge',
- 'badge-' + color,
- pill ? 'badge-pill' : false
+ 'bg-' + color,
+ pill ? 'rounded-pill' : false
), cssModule);
if (attributes.href && Tag === 'span') {
diff --git a/src/__tests__/Badge.spec.js b/src/__tests__/Badge.spec.js
index 33c1d67c4..53b351dd8 100644
--- a/src/__tests__/Badge.spec.js
+++ b/src/__tests__/Badge.spec.js
@@ -30,18 +30,18 @@ describe('Badge', () => {
it('should render badges with secondary color', () => {
const wrapper = shallow(Default Badge);
- expect(wrapper.hasClass('badge-secondary')).toBe(true);
+ expect(wrapper.hasClass('bg-secondary')).toBe(true);
});
it('should render Badges with other colors', () => {
const wrapper = shallow(Danger Badge);
- expect(wrapper.hasClass('badge-danger')).toBe(true);
+ expect(wrapper.hasClass('bg-danger')).toBe(true);
});
it('should render Badges as pills', () => {
const wrapper = shallow(Pill Badge);
- expect(wrapper.hasClass('badge-pill')).toBe(true);
+ expect(wrapper.hasClass('rounded-pill')).toBe(true);
});
});