04. The `tone` variant

🐇 TL;DR

• We’ve got the size variants working
• Let’s tackle the tone variants next!

⬇️ Skip to the challenge

---

🐢 Background

Our Modal component should come in three different tones:

type ModalProps = {
  // ...
  tone: 'default' | 'danger' | 'success'
}

Let’s take a look at what those tones look like:

---

---

As you may have noticed, these tone values are the same than the ones used in the Button component we worked on previously.

Matter of fact, the tone prop type is actually imported from the Button component:

import { ButtonProps } from '../button'

type ModalProps = {
  // ...
  tone: ButtonProps['tone']
}

This ensure that the possible values are exactly the same.

---

🏆 Your challenge 🏆

In the Gitpod workspace below:

1. Figure out where the toneClasses object should be used in the Modal markup.

2. Populate that toneClasses object with the relevant Tailwind classes.

Make sure the Button components use the correct tone as well!

You’ll find more hints within the workspace.

---

✌️ Good luck!

Open in Gitpod →