> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/excalidraw/excalidraw/llms.txt
> Use this file to discover all available pages before exploring further.
# Button Components
> Reusable button components following Excalidraw's design system
# Button Components
Excalidraw provides several button components that follow the editor's design system. These components ensure visual consistency and provide common button patterns used throughout the editor.
## Button
The main `Button` component is a generic button that accepts all standard HTML button props and adds Excalidraw styling.
### Basic Usage
```jsx Simple Button theme={null}
import { Button } from "@excalidraw/excalidraw";
function MyComponent() {
const handleClick = () => {
console.log("Button clicked");
};
return (
);
}
```
```jsx Button with Selected State theme={null}
import { Button } from "@excalidraw/excalidraw";
import { useState } from "react";
function MyComponent() {
const [isActive, setIsActive] = useState(false);
return (
);
}
```
```jsx Custom Styled Button theme={null}
import { Button } from "@excalidraw/excalidraw";
function MyComponent() {
return (
);
}
```
### Props
Callback function executed when the button is clicked.
```typescript theme={null}
onSelect: () => any;
```
Whether the button is in an active/selected state. Adds visual styling to indicate selection.
The button content (text, icons, or other elements).
The HTML button type attribute.
Additional CSS class names to apply to the button.
All standard HTML button attributes are supported (disabled, title, aria-label, etc.).
### Styling
The Button component uses the `.excalidraw-button` CSS class:
```css theme={null}
.excalidraw-button {
padding: 0.5rem 1rem;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
background: white;
cursor: pointer;
font-family: inherit;
font-size: 0.875rem;
transition: all 0.2s;
}
.excalidraw-button:hover {
background: #f9fafb;
}
.excalidraw-button.selected {
background: #e0e7ff;
border-color: #6965db;
}
.excalidraw-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
```
## ButtonIcon
A specialized button component for icon-only buttons, commonly used in toolbars.
### Basic Usage
```jsx Icon Button theme={null}
import { ButtonIcon } from "@excalidraw/excalidraw";
import { TrashIcon } from "./icons";
function MyComponent() {
const handleDelete = (event) => {
console.log("Delete clicked");
};
return (
);
}
```
```jsx Active Icon Button theme={null}
import { ButtonIcon } from "@excalidraw/excalidraw";
import { LockIcon } from "./icons";
import { useState } from "react";
function MyComponent() {
const [isLocked, setIsLocked] = useState(false);
return (
setIsLocked(!isLocked)}
/>
);
}
```
```jsx Standalone Icon Button theme={null}
import { ButtonIcon } from "@excalidraw/excalidraw";
import { SettingsIcon } from "./icons";
function MyComponent() {
return (
console.log("Settings")}
style={{ margin: "1rem" }}
/>
);
}
```
### Props
The icon element to display in the button.
Tooltip text shown on hover (also used for accessibility).
Callback function when the button is clicked.
```typescript theme={null}
onClick: (event: React.MouseEvent) => void;
```
Whether the button is in an active state (e.g., tool currently selected).
When true, applies standalone styling that may be better suited for isolated buttons outside of toolbars.
Additional CSS class names to apply.
Test identifier for automated testing (sets `data-testid` attribute).
Inline styles to apply to the button.
## Complete Examples
```jsx Button Group theme={null}
import { Button } from "@excalidraw/excalidraw";
import { useState } from "react";
function AlignmentButtons() {
const [alignment, setAlignment] = useState("left");
return (