TypeScript · Exercise 1 of 6Next
Beginner
Type the props of a Badge
The Badge component below is half done. Fill in BadgeProps so that label is required text and tone is optional and can only be "info", "warn" or "error".
The checks use the component name Badge, the class names badge info / badge warn and the container #app. Don't rename them. The page should show two badges: New (default tone) and Late (warn).
What Check tests
- Your code has no type errors
- A Badge without a label is rejected
- A tone outside info, warn and error is rejected
- tone="error" is accepted
- The page shows two badges: class "badge info" and "badge warn"
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.