Skip to main content

​
Overview

SlideLink is a pre-styled Next.js <Link> component designed for navigation within slide decks. It provides two visual styles: a solid primary button and a bordered ghost button.

​
Props

​
href
string
required
The destination URL. Can be a slide path, breakout page, or external URL.
​
children
React.ReactNode
required
The link content (text, icons, etc.).
​
variant
SlideLinkVariant
default:"primary"
Visual style. "primary" is a solid button; "ghost" is a bordered transparent button.
​
className
string
Additional CSS classes to apply to the link.

​
Type Definitions

type SlideLinkVariant = 'primary' | 'ghost';

​
Usage Examples

​
Basic navigation to breakout page

import { SlideLink } from 'nextjs-slides';

<SlideLink href="/slides/demo1">Breakout page →</SlideLink>

<SlideLink href="/" variant="ghost">Exit deck</SlideLink>

​
Custom styling

<SlideLink 
  href="/slides/5" 
  variant="primary"
  className="mt-4 text-lg"
>
  Continue to next section
</SlideLink>

​
Styling

The component applies these base classes:
  • nxs-slide-link - Base identifier class
  • Flexbox layout with centered content
  • Rounded corners, padding, and smooth transitions
Primary variant: Solid background with hover opacity effect
Ghost variant: Transparent background with border and muted hover state You can override styles using Tailwind CSS classes via the className prop.

Build docs developers (and LLMs) love

Get started for freeTalk to us