Sprite Button

A button drawn by one of the game's own button sprites, lit on hover and while the window it opens is open.

Installation

npx shadcn@latest add https://osrsui.com/r/sprite-button.json

Usage

import { SpriteButton } from "@/components/ui/sprite-button"
import { buttonSprites } from "@/components/ui/button-sprites"

<SpriteButton sprite={buttonSprites.wrench} activeSprite={buttonSprites.wrenchHovered} aria-label="Settings" />

activeSprite shows on hover, while aria-pressed is true, and while the menu or popover it triggers is open. Sprite buttons have no text, so always give one an aria-label. For a framed button with a sprite inside, use Button’s icon sizes instead.