Badge Component With Color
ReactJS
Easy
6 views
Problem Description
Make a Badge component that supports colors: green, gray, red.
Output Format
Render a React component.
Constraints
Map prop values to styles.
Official Solution
import React from 'react';
export function Badge({ tone = 'gray', children }) {
const tones = {
green: { background: '#eafaf1', color: '#0b5', border: '1px solid #b7f0d0' },
gray: { background: '#f3f4f6', color: '#374151', border: '1px solid #e5e7eb' },
red: { background: '#ffe8ea', color: '#c1121f', border: '1px solid #ffc2c7' }
};
return (
<span style={{ display: 'inline-block', padding: '4px 10px', borderRadius: 999, fontSize: 12, fontWeight: 700, ...tones[tone] }}>
{children}
</span>
);
}
export default function App() {
return (
<div style={{ display: 'flex', gap: 10, padding: 16 }}>
<Badge tone='green'>NEW</Badge>
<Badge>INFO</Badge>
<Badge tone='red'>ALERT</Badge>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!