> ## Documentation Index
> Fetch the complete documentation index at: https://learn.mintlify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Site-wide, page-level, and inline signals

> Banners, tags, and badges emphasize information outside of the main content on a page.

export const Quiz = ({question, answers, correctFeedback, incorrectFeedback}) => {
  const [selected, setSelected] = React.useState(null);
  const [checked, setChecked] = React.useState(false);
  const quizId = React.useId();
  const isCorrect = checked && answers[selected]?.correct;
  const reset = () => {
    setSelected(null);
    setChecked(false);
  };
  return <div className={"quiz-container" + (checked ? " quiz-checked" : "")}>
      <Badge color="green">Quiz</Badge>
      <p className="quiz-question" id={quizId + "-question"}>{question}</p>
      <div className="quiz-options" role="radiogroup" aria-labelledby={quizId + "-question"} aria-disabled={checked}>
        {answers.map((answer, i) => <label key={i} className={["quiz-option", !checked && selected === i ? "quiz-option-selected" : "", checked && answer.correct ? "quiz-option-correct" : "", checked && selected === i && !answer.correct ? "quiz-option-incorrect" : ""].filter(Boolean).join(" ")}>
            <input type="radio" name={"quiz-" + quizId} checked={selected === i} onChange={() => !checked && setSelected(i)} disabled={checked} />
            <span className="quiz-radio" />
            <span className="quiz-option-label">{answer.text}</span>
          </label>)}
      </div>
      {checked && <div className={"quiz-feedback " + (isCorrect ? "quiz-feedback-correct" : "quiz-feedback-incorrect")} role="status" aria-live="polite" aria-atomic="true">
          <span className="quiz-feedback-icon">{isCorrect ? "✓" : "✗"}</span>
          {isCorrect ? correctFeedback : incorrectFeedback}
        </div>}
      <div className="quiz-actions">
        {!checked ? <button className="quiz-btn quiz-btn-check" type="button" onClick={() => selected !== null && setChecked(true)} disabled={selected === null}>
            Check answer
          </button> : <button className="quiz-btn quiz-btn-reset" type="button" onClick={reset}>
            Try again
          </button>}
      </div>
    </div>;
};

Callouts appear inside your content and interrupt the reading flow. But some information needs to exist outside the content entirely when it applies to the whole site, is relevant to the sidebar navigation, or it marks up something inline without stopping the reader.

Use banners, tags, and badges to handle these three cases.

## Banner: site-wide announcements

A `<Banner>` appears at the top of the page, above all content. Configure it in `docs.json` and choose whether it is dismissable or not.

Use a banner when:

* You're announcing a deprecation that affects a significant portion of your users.
* A feature is in maintenance mode or temporarily unavailable.
* There's a breaking change in an upcoming release that everyone needs to know about before they continue reading.

Defining characteristics of banners are that they're timely and relevant to the majority of your users.

```json Example of a banner in docs.json theme={null}
{
  "banner": {
    "content": "API v1 is deprecated and will be removed on March 31. [Migrate to v2](/guides/migrate-v2) before that date.",
    "dismissible": true
  }
}
```

### When not to use a banner

If an announcement is only applicable to a small portion of your users, don't use a banner.

Don't use a banner for:

* A new feature announcement that isn't urgent or widely relevant (write a changelog entry instead).
* Page-specific notes or warnings (use a callout instead).
* Content that applies to only some users (the banner appears to everyone).

The cost of a banner is high: it takes up space on every page and if it's not relevant to people, it trains them to dismiss banners without reading them. Use banners thoughtfully, and retire them promptly.

## Tag: sidebar labels for pages

The `tag` frontmatter property adds a short label next to your page title in the sidebar. Use it to signal the status of a page to readers before they open it.

```yaml Example of a tag theme={null}
---
title: "Streaming responses"
tag: "New"
---
```

Tags are useful for:

* Marking new pages or recently updated content so returning users notice them.
* Labeling preview or beta features that aren't yet stable.

For deprecated pages, Mintlify has a specific frontmatter property: `deprecated: true`.

```yaml Example of a deprecated page theme={null}
---
title: "Legacy authentication"
deprecated: true
---
```

This displays a "Deprecated" label in the sidebar and on the page itself.

## Badge: inline labels and status indicators

Use `<Badge>` components to communicate status, version, or category inline with your content.

```mdx Example of a badge theme={null}
## Streaming responses <Badge color="green">New</Badge>

Streaming is now available for all API tiers.
```

Common uses for badges are:

* Versions and availability: <Badge color="blue">Available in v2.3+</Badge>
* Status indicators: <Badge color="green">Beta</Badge>, <Badge color="red">Deprecated</Badge>, <Badge color="orange">Enterprise</Badge>
* Requirements and defaults: <Badge color="gray">Required</Badge>, <Badge color="gray">Optional</Badge>, <Badge color="gray">Default</Badge>

## Tags versus badges

Both tags and badges are labels, but they appear in different places and serve different readers.

A tag is a sidebar signal. It's visible before the reader opens a page and useful for readers scanning navigation.

A badge appears inside the content and labels something at the point where the reader encounters it.

The right choice depends on when the reader needs the information: in the sidebar while navigating or in the content while reading.

<Quiz
  question="You've released a new page documenting a beta feature. You want readers to know it's in beta before they read the page. Which approach fits best?"
  answers={[
{ text: "A banner on the site so readers immediately know about the page.", correct: false },
{ text: "A badge on the main heading of the page.", correct: false },
{ text: "The tag frontmatter property set to 'Beta'.", correct: true },
{ text: "A note callout at the top of the page.", correct: false },
]}
  correctFeedback="Right. The tag frontmatter property labels the page in the sidebar so it's visible while readers are navigating, before they open the page. That's the right signal for readers who are scanning to understand what's stable and what isn't."
  incorrectFeedback="Badges or callouts require the reader to open the page first. And a banner is too broad a signal for a single page unless everyone needs to know about the feature. The tag frontmatter property labels the page in the sidebar, so readers scanning the navigation see it before they click in. That's what makes it right for signaling status to readers who haven't opened the page yet."
/>

<Check>
  Next up: [Steps or numbered lists](/courses/components/steps-or-lists) — How to decide when a procedure warrants the steps component and when a simple numbered list works better.
</Check>