Skip to main content

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 */
/* eslint-disable no-alert */

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

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

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

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 - React Node - 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 — function — Mouse click event handler. It is also triggered when the button is focused and «Enter» key is pressed. In both cases it receieve corresponding event (mouse or keyboard) as its argument.

  • onMouseDown - function - Mouse down 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.