# CommandButton

Source: https://developers.inkdrop.app/components/command-button

A built-in React [component](https://developers.inkdrop.app/modules/component-manager) of Inkdrop that extends [Button](https://developers.inkdrop.app/components/button).
When clicked, it dispatches an Inkdrop [command](https://developers.inkdrop.app/modules/command-registry), and its tooltip automatically
shows the command's keybinding.

To get the class of the `CommandButton` component:

```tsx
import type { CommandButtonProps } from '@inkdropapp/types'

const CommandButton =
  env.components.getComponentClass<CommandButtonProps>('CommandButton')
```

## Props

`CommandButton` accepts all [Button](https://developers.inkdrop.app/components/button) props in addition to the following:

```typescript
type CommandButtonProps = ButtonProps & {
  // The command to dispatch when the button is clicked.
  command?: string
  // The DOM element to dispatch the command on. Defaults to document.body.
  commandTarget?: HTMLElement
  // The detail payload passed with the dispatched command.
  commandDetail?: any
}
```

## Example

```tsx
import React from 'react'
import type { CommandButtonProps } from '@inkdropapp/types'

import { getEnv } from './env'

const SaveButton: React.FC = () => {
  const CommandButton =
    getEnv().components.getComponentClass<CommandButtonProps>('CommandButton')

  return (
    <CommandButton primary command="core:save-note">
      Save
    </CommandButton>
  )
}

export default SaveButton
```

`getEnv()` is the small helper — shown in the [Word Count plugin walkthrough](https://developers.inkdrop.app/guides/plugin-word-count#understanding-the-generated-code) — that captures the [Environment](https://developers.inkdrop.app/modules/environment) handed to `activate()` so components can reach it too.

## See also

- [Button](https://developers.inkdrop.app/components/button) — the base button component.
- [Command Registry](https://developers.inkdrop.app/modules/command-registry) — how Inkdrop commands are registered and dispatched.