Button Components
Proton provides a variety of button components for different use cases, from basic buttons to specialized button groups and floating action buttons.
The primary button component from the atoms package.
Basic Usage
import { Button } from '@proton/atoms/Button/Button';
const MyComponent = () => {
return (
<Button color="norm" onClick={() => console.log('Clicked')}>
Click Me
</Button>
);
};
Props
Button color variant. Options: norm, weak, danger, warning, success, info
Button shape variant. Options: solid, outline, ghost
Button size. Options: small, medium, large
Whether the button should take full width of its container
Shows loading spinner and disables the button
Renders as an icon button (square shape)
Examples
Colors
Shapes
Sizes
States
<Button color="norm">Normal</Button>
<Button color="weak">Weak</Button>
<Button color="danger">Danger</Button>
<Button color="warning">Warning</Button>
<Button color="success">Success</Button>
<Button shape="solid" color="norm">Solid</Button>
<Button shape="outline" color="norm">Outline</Button>
<Button shape="ghost" color="norm">Ghost</Button>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<Button loading>Loading</Button>
<Button disabled>Disabled</Button>
<Button icon><Icon name="plus" /></Button>
components/button/ButtonGroup.tsx
Usage
import { ButtonGroup } from '@proton/components/components/button/ButtonGroup';
import { Button } from '@proton/atoms/Button/Button';
const MyButtonGroup = () => {
return (
<ButtonGroup>
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
</ButtonGroup>
);
};
Props
Color scheme for all buttons in the group. Default: weak
Shape for all buttons in the group. Default: outline
Size for all buttons in the group. Default: medium
Show separators between buttons. Default: true
Apply pill shape to the button group. Default: false
Allow individual buttons to override the group color. Default: false
Examples
Basic Group
Pill Style
No Separators
Different Colors
<ButtonGroup>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup pill>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup separators={false}>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup individualButtonColor>
<Button color="norm">Primary</Button>
<Button color="weak">Secondary</Button>
<Button color="danger">Delete</Button>
</ButtonGroup>
components/button/FloatingButton.tsx
Usage
import FloatingButton from '@proton/components/components/button/FloatingButton';
import { Icon } from '@proton/components';
const MyFAB = () => {
return (
<FloatingButton onClick={() => console.log('FAB clicked')}>
<Icon name="plus" />
</FloatingButton>
);
};
Props
Extends ButtonProps from @proton/atoms/Button/Button.
Tooltip text for the button
Example
<FloatingButton
title="Create new item"
className="fixed bottom-4 right-4"
>
<Icon name="plus" size={5} />
</FloatingButton>
components/button/FileButton.tsx
Usage
import FileButton from '@proton/components/components/button/FileButton';
const MyFileUpload = () => {
const handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
const files = event.target.files;
console.log('Selected files:', files);
};
return (
<FileButton
onSelect={handleFileSelect}
accept="image/*"
>
Upload Image
</FileButton>
);
};
components/button/SidebarExpandButton.tsx
Usage
import SidebarExpandButton from '@proton/components/components/button/SidebarExpandButton';
const MySidebar = () => {
const [expanded, setExpanded] = useState(false);
return (
<SidebarExpandButton
expanded={expanded}
onClick={() => setExpanded(!expanded)}
/>
);
};
Best Practices
- Primary Action: Use
color="norm" with shape="solid"
- Secondary Action: Use
color="weak" or shape="outline"
- Destructive Action: Use
color="danger"
<div className="flex gap-2">
<Button color="norm" shape="solid">Save</Button>
<Button color="weak" shape="outline">Cancel</Button>
</div>
Loading States
Show loading state during async operations:
const [loading, setLoading] = useState(false);
const handleSubmit = async () => {
setLoading(true);
try {
await saveData();
} finally {
setLoading(false);
}
};
return (
<Button loading={loading} onClick={handleSubmit}>
Save Changes
</Button>
);
Accessibility
// Provide aria-label for icon-only buttons
<Button icon aria-label="Close dialog">
<Icon name="cross" />
</Button>
// Use disabled state appropriately
<Button disabled={!isValid}>Submit</Button>
Source Code
View source:
- Button:
packages/components/components/button/
- ButtonGroup:
packages/components/components/button/ButtonGroup.tsx:1
- FloatingButton:
packages/components/components/button/FloatingButton.tsx:1