SlideBadge
Small pill-shaped label, typically placed above a title to categorise the slide (e.g. component name, topic tag).
Props
Additional CSS classes to apply
Usage
import { Slide, SlideBadge, SlideTitle } from 'nextjs-slides';
export default function MySlide() {
return (
<Slide>
<SlideBadge>Component API</SlideBadge>
<SlideTitle>SlideTitle</SlideTitle>
</Slide>
);
}
<Slide align="left">
<SlideBadge>Advanced</SlideBadge>
<SlideTitle>Performance Optimization</SlideTitle>
<SlideSubtitle>Techniques for large-scale applications</SlideSubtitle>
</Slide>
Custom Styling
<SlideBadge className="bg-blue-500 text-white">
New Feature
</SlideBadge>
Multiple Badges
<Slide>
<div className="flex gap-2">
<SlideBadge>React</SlideBadge>
<SlideBadge>TypeScript</SlideBadge>
</div>
<SlideTitle>Type-Safe Components</SlideTitle>
</Slide>
Styling Details
- Shape: Pill-shaped with
rounded-full
- Default colors:
bg-foreground background, text-background text
- Padding:
px-4 py-1.5
- Font size:
text-sm
- Font weight:
font-semibold
- Letter spacing:
tracking-wide
- Display:
inline-block with w-fit and shrink-0
- Semantic HTML: Renders as
<span> element