The RPButton component is a styled button component designed to match the React PDF Viewer component’s design system with support for active states and accessibility features.

RPButton extends the standard HTML button element, accepting all standard ButtonHTMLAttributes props, while adding React PDF-specific styling and an optional active state for toggle buttons. The component also works with icons whether icon-only or icon with content buttons.

Props

Name	Type	Description
children	React.ReactNode	The content to display inside the button
active	boolean	(optional) When set to true, apply the active button style. Useful for toggle buttons or buttons that represent an active state.
className	string	(optional) Additional CSS classes to apply to the button
role	string	(optional) ARIA role attribute for accessibility. When active prop is used, aria-pressed is automatically set based on the active state.

Button Tooltip

RPButton is designed to work together with RPTooltip. Wrapping RPButton with RPTooltip is the recommended pattern for toolbar actions so users see both the icon and a descriptive label on hover.

Styling

RPButton applies the rp-button CSS class by default. When the active prop is true, it also applies the rp-button-active class. You can override or extend these styles using the className prop or by customizing the CSS variables in your RPTheme.

The component uses clsx internally to combine classes, ensuring that custom classes work with the default React PDF styling.

Accessibility

RPButton includes built-in accessibility features:

• Tab Index: The button has tabIndex={0} by default, making it keyboard accessible
• ARIA Pressed: When the active prop is provided, aria-pressed is automatically set to reflect the button’s active state
• Role Support: You can specify a custom role attribute if needed for specific use cases.

Usage

Basic Button with Icon

A simple usage of RPButton is as an icon button with icon content.

import { RPButton } from '@pdf-viewer/react'

export const MyComponent = () => {
  return (
    <RPButton onClick={() => console.log('Button clicked')}>
      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 10L4 6h8L8 10z" />
      </svg>
    </RPButton>
  )
}

Button with Tooltip

For a button using the React PDF Viewer component’s default toolbar style, wrap RPButton with RPTooltip to show a label on hover.

import { RPButton, RPTooltip } from '@pdf-viewer/react'

export const ToolbarButton = () => {
  return (
    <RPTooltip content="Zoom in">
      <RPButton onClick={() => console.log('Zoom in')}>
        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
          <path d="M8 2L2 8l6 6 6-6-6-6z" />
        </svg>
      </RPButton>
    </RPTooltip>
  )
}

Button with Active State

Use the active prop to create toggle buttons or buttons that represent an active state.

import { useState } from 'react'
import { RPButton } from '@pdf-viewer/react'

export const ToggleButton = () => {
  const [isActive, setIsActive] = useState(false)

  return (
    <RPButton active={isActive} onClick={() => setIsActive(!isActive)}>
      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 2L2 8l6 6 6-6-6-6z" />
      </svg>
    </RPButton>
  )
}

Button with Custom Styling

Apply additional CSS classes or inline styles using standard HTML button attributes. This is useful when you need to customize the appearance of icon buttons.

import { RPButton } from '@pdf-viewer/react'

export const CustomButton = () => {
  return (
    <RPButton className="my-custom-class" style={{ margin: '10px' }} disabled={false} type="button">
      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 4l4 4-4 4-4-4 4-4z" />
      </svg>
    </RPButton>
  )
}