# Button

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

A built-in React [component](https://developers.inkdrop.app/modules/component-manager) of Inkdrop that renders a styled button
with optional icon and tooltip support.
In addition to the props below, `Button` accepts all standard
[`<button>` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#attributes)
such as `onClick`, `disabled`, and `type`.

To get the class of the `Button` component:

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

const Button = env.components.getComponentClass<ButtonProps>('Button')
```

## Props

```typescript
type ButtonProps = {
  // The element type to render as. Defaults to 'button'.
  as?: React.ElementType
  // The name of a Streamline icon to render before the children.
  icon?: string
  // Render with primary styling.
  primary?: boolean
  // Render with negative (destructive) styling.
  negative?: boolean
  // Render with basic styling.
  basic?: boolean
  // Render without the default `ui button` classes.
  bare?: boolean
  // Tooltip content shown while hovering the button.
  tooltip?: React.ReactNode
  // Additional class name applied to the tooltip.
  tooltipClassName?: string
} & React.ButtonHTMLAttributes<HTMLButtonElement>
```

## Example

```tsx
import React, { useCallback } from 'react'
import type { ButtonProps } from '@inkdropapp/types'

import { getEnv } from './env'

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

  const onClick = useCallback(() => {
    getEnv().commands.dispatch(document.body, 'core:save-note')
  }, [])

  return (
    <Button primary tooltip="Save the note" onClick={onClick}>
      Save
    </Button>
  )
}

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

- [CommandButton](https://developers.inkdrop.app/components/command-button) — a `Button` that dispatches an Inkdrop command when clicked.