Button

import { Button, BaseButton } from '@dr.pogodin/react-utils';

The Button component implements themeable buttons, and button-line links (elements that look like buttons, but behave as links) in the same uniform manner. The base, non-themed version of the component is also exported under the BaseButton name.

Demo (expand to see the source code)

Button

Button-Like Link

Disabled Button

Forced-Active Button

/* global alert */

import { useColorMode } from '@docusaurus/theme-common';
import { Button, ThemeProvider } from '@dr.pogodin/react-utils';

import darkButtonTheme from '../themes/buttons/dark.module.scss';

function ButtonsExample() {
  const { isDarkTheme } = useColorMode();
  return (
    <ThemeProvider
      themes={{ Button: isDarkTheme ? darkButtonTheme : undefined }}
    >
      <Button
        onClick={() => {
          // eslint-disable-next-line no-alert
          alert('Button Clicked');
        }}
      >
        Button
      </Button>
      <Button openNewTab to="https://dr.pogodin.studio">
        Button-Like Link
      </Button>
      <Button disabled>Disabled Button</Button>
      <Button active>Forced-Active Button</Button>
    </ThemeProvider>
  );
}

export default ButtonsExample;

A Button instance is rendered in different ways:

1. As <div> element if the button is disabled.
2. As Link if its to property is set, and the button is not disabled.
3. As <div> element in any other case.

The button is themed using React Themes library, with the default theme ensuring consistent visual appearance of the button in all different rendering cases.

Properties

• active — boolean — Enforces active button state (even when the button is not active by the regular criteria).

• children — ReactNode — Component children, if any, are rendered as the button's content.

• disabled — boolean — Disables the button.

• enforceA — boolean — If the button is rendered as Link this flag enforces it to be rendered as a simple <a> element (external link) rather than an internal link. See Link documentation for details.

• onClick — KeyboardEventHandler & MouseEventHandler — Click event handler. It is triggered both when the button is clicked by mouse, and when it is focused, and «Enter» key is pressed on the keyboard. In either case it receives the corresponding event (keyboard, or mouse), as its only argument.

• onMouseDown — MouseEventHandler — Mouse down event handler.

• onMouseUp — MouseEventHandler — Mouse up event handler.

• onPointerDown — PointerEventHandler — Pointer down event handler.

• onPointerUp — PointerEventHandler — Pointer up event handler.

• openNewTab — boolean — If the button is rendered as Link this flag opts to open the link in a new tab.

• replace — boolean — If the button is rendered as Link, and the target URL is internal, this flag opts for the new route to replace the last record in the navigation history, instead of being pushed as a new entry into the nav history stack.

• testId — string — This value is assigned to the data-testid attribute of the underlying button element, to facilitate testing with testing-library. It is optimized out from production builds.

• theme — ButtonTheme — Ad hoc button theme.

• to — object | string — If specified, the button is rendered as Link (if not disabled), and beside the visual appearance as a button it acts as a link pointing the target URL.

• Accepts other props of themed components.

ButtonTheme

Valid Button theme keys are:

• active — Applied to buttons in active state.
• button — Applied to all button instaces.
• disabled — Applied to disabled buttons.

See React Themes documentation for theming details.