Icon button
A button that shows only an icon, for compact or frequently repeated actions. When space allows, prefer a Button with a visible label.
Code
demo.tsx
import {SettingsIcon} from '@earendil-works/elanor-icons-react';
import {IconButton} from '@earendil-works/elanor-react';
export default function IconButtonDemo() {
return (
<IconButton aria-label="Workspace settings">
<SettingsIcon />
</IconButton>
);
}Usage
import {SettingsIcon} from '@earendil-works/elanor-icons-react';
import {IconButton} from '@earendil-works/elanor-react';
<IconButton aria-label="Workspace settings">
<SettingsIcon />
</IconButton>;Icons are decorative by default, so the button needs an aria-label.
Changing the label
When the action changes, update the icon and aria-label together.
••••••••••••
Code
toggle.tsx
import {VisibilityIcon, VisibilityOffIcon} from '@earendil-works/elanor-icons-react';
import {IconButton, Stack, Text} from '@earendil-works/elanor-react';
import {useState} from 'react';
export default function IconButtonToggle() {
const [visible, setVisible] = useState(false);
return (
<Stack direction="row" align="center" gap="small">
<IconButton
aria-label={visible ? 'Hide API key' : 'Show API key'}
onClick={() => setVisible(!visible)}
>
{visible ? <VisibilityOffIcon /> : <VisibilityIcon />}
</IconButton>
<Text render={<span />}>{visible ? 'sk-live-2048' : '••••••••••••'}</Text>
</Stack>
);
}Disabled
Code
disabled.tsx
import {SettingsIcon} from '@earendil-works/elanor-icons-react';
import {IconButton} from '@earendil-works/elanor-react';
export default function IconButtonDisabled() {
return (
<IconButton aria-label="Workspace settings" disabled>
<SettingsIcon />
</IconButton>
);
}API
IconButton
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'submit' | 'reset' | 'button' | 'button' |
Also accepts Base UI Button props.