Link Toolbar Button

PreviousNext

A toolbar control for link management.

Preview

Loading preview…
registry/ui/link-toolbar-button.tsx
'use client';

import * as React from 'react';

import {
  useLinkToolbarButton,
  useLinkToolbarButtonState,
} from '@platejs/link/react';
import { Link } from 'lucide-react';

import { ToolbarButton } from './toolbar';

export function LinkToolbarButton(
  props: React.ComponentProps<typeof ToolbarButton>
) {
  const state = useLinkToolbarButtonState();
  const { props: buttonProps } = useLinkToolbarButton(state);

  return (
    <ToolbarButton {...props} {...buttonProps} data-plate-focus tooltip="Link">
      <Link />
    </ToolbarButton>
  );
}

Installation

npx shadcn@latest add @plate/link-toolbar-button

Usage

import { LinkToolbarButton } from "@/components/ui/link-toolbar-button"
<LinkToolbarButton />