@primer/react/lib-esm/ActionList/TrailingAction.js

An implementation of GitHub's Primer Design System using React

import { forwardRef } from 'react';
import { IconButton } from '../Button/IconButton.js';
import { ButtonComponent } from '../Button/Button.js';
import { clsx } from 'clsx';
import classes from './ActionList.module.css.js';
import { jsx } from 'react/jsx-runtime';

const TrailingAction = /*#__PURE__*/forwardRef(({
  as = 'button',
  icon,
  label,
  href = null,
  className,
  loading,
  ...props
}, forwardedRef) => {
  return /*#__PURE__*/jsx("span", {
    className: clsx(className, classes.TrailingAction),
    children: icon ? /*#__PURE__*/jsx(IconButton, {
      as: as,
      "aria-label": label,
      icon: icon,
      variant: "invisible",
      tooltipDirection: "w",
      href: href,
      loading: loading,
      "data-loading": Boolean(loading)
      // @ts-expect-error StyledButton wants both Anchor and Button refs
      ,
      ref: forwardedRef,
      className: classes.TrailingActionButton,
      ...props
    }) :
    /*#__PURE__*/
    // @ts-expect-error shhh
    jsx(ButtonComponent, {
      variant: "invisible",
      as: as,
      href: href,
      loading: loading,
      "data-loading": Boolean(loading),
      ref: forwardedRef,
      className: classes.TrailingActionButton,
      ...props,
      children: label
    })
  });
});

export { TrailingAction };