primitives

Download Tooltip Button

A dark pill-shaped button with a download icon and label. On hover (or focus), a compact tooltip bubble fades in from below the button, translating upward for a polished reveal. All colors are token-driven for light/dark theme robustness. Accessible: native button semantics, aria-label, focus-visible ring; tooltip is aria-hidden (decorative duplicate). Under prefers-reduced-motion the tooltip fades in only — no translate.

Ported from sahilxkhadka (MIT)

Install

1. Register the namespace (once per project):

json

// components.json — register the @bottega namespace once
{
  "registries": {
    "@bottega": { "url": "https://bottega.ariacode.ca/r/{name}.json" }
  }
}

2. Add the component:

bash

npx shadcn add @bottega/download-tooltip-button

Usage

Usagetsx

<DownloadTooltipButton />

Props

Standard props — see source.

Source

download-tooltip-button.tsxtsx

"use client";

import type React from "react";
import styles from "./download-tooltip-button.module.css";

export type DownloadTooltipButtonProps = React.ComponentProps<"button"> & {
  /** Button label and tooltip text. Defaults to "Download". */
  label?: string;
};

export function DownloadTooltipButton({
  label = "Download",
  className,
  ...props
}: DownloadTooltipButtonProps) {
  return (
    <button
      type="button"
      aria-label={label}
      className={[styles.button, className].filter(Boolean).join(" ")}
      {...props}
    >
      {/* Download icon — stroke follows currentColor (var(--background)) */}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
        aria-hidden="true"
      >
        <path
          strokeLinejoin="round"
          strokeLinecap="round"
          strokeWidth="2"
          stroke="currentColor"
          d="M6 21H18M12 3V17M12 17L17 12M12 17L7 12"
        />
      </svg>
      {label}
      {/* Tooltip: decorative duplicate — aria-hidden so screen readers skip it */}
      <span aria-hidden="true" className={styles.tooltip}>
        {label}
      </span>
    </button>
  );
}

Dependencies

@bottega/tokens