@hypothesis/frontend-shared/lib/components/navigation/PointerButton.d.ts

Shared components, styles and utilities for Hypothesis projects

import type { PresentationalProps } from '../../types';
import type { ButtonProps } from '../input/Button';
type ComponentProps = {
    /**
     * Direction the button should point. If not provided, the button will be
     * lozenge-shaped.
     */
    direction?: 'left' | 'up' | 'down';
};
export type PointerButtonProps = PresentationalProps & Omit<ButtonProps, 'variant' | 'size' | 'unstyled'> & ComponentProps;
/**
 * A button for pointing toward a quantified set of items somewhere else in the
 * UI or off-screen. When clicked, the application should navigate to the
 * indicated or implied position.
 *
 * Used by the bucket bar in the client application to point at
 * highlights/annotations in the guest document. Expected button content is
 * numeric text, e.g.:
 *
 *   <PointerButton direction="left">5</PointerButton>
 *
 * The arrow-points are created by the combination of borders and positioning.
 * See https://css-tricks.com/snippets/css/css-triangle/
 */
export default function PointerButton({ children, classes, elementRef, expanded, pressed, title, direction, ...htmlAndButtonProps }: PointerButtonProps): import("preact").JSX.Element;
export {};