Badge Component outside of the Sidebar

[Pukimaa]

What version of starlight are you using?

0.12.0

What is your idea?

The <Badge /> component should be usable outside of the sidebar using the default way of using components.

Why is this feature necessary?

I really like this component and I have a few usecases outside of the sidebar. I can import it but not the same way as other components and thus having two import statements, where I feel like it should just be one.

Do you have examples of this feature in other projects?

Should be the same as the other built-in components as outlined in the docs: https://starlight.astro.build/guides/components/#built-in-components

Participation

• I am willing to submit a pull request for this feature.

[delucis]

Thanks for the request @Pukimaa! I agree this would be nice to expose for use inline. IIRC from discussion during the initial PR there are some details we’d like to look at in the current <Badge /> component to make sure it works nicely when used in other contexts, but definitely something we’d like to do.

[HiDeoo]

Starlight 0.24.0 added a new <Badge> component.

import { Badge } from '@astrojs/starlight/components';

<Badge text="New" variant="tip" size="small" />
<Badge text="Deprecated" variant="caution" size="medium" />
<Badge text="Starlight" variant="note" size="large" />
<Badge text="Custom" variant="success" style={{ fontStyle: 'italic' }} />