IconButton
Use an IconButton when you need to provide an action for a user to take in a compact space.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { IconButton } from '@adaptavant/eds-core';
Variants
The Button is available in 9 variants, accentPrimary is the default.
{/* accentPrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
variant="accentPrimary"
/>
{/* neutralPrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
variant="neutralPrimary"
/>
{/* accentSecondary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
variant="accentSecondary"
/>
{/* neutralSecondary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
variant="neutralSecondary"
/>
{/* neutralSecondaryIntense */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
variant="neutralSecondaryIntense"
/>
{/* criticalPrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
variant="criticalPrimary"
/>
{/* neutralTertiary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
variant="neutralTertiary"
/>
{/* criticalTertiary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
variant="criticalTertiary"
/>
{/* inversePrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
variant="inversePrimary"
/>
Icon
Customise the icon for the button via the icon prop.
{/* CheckIcon */}
<IconButton
aria-label="Click me!"
icon={CheckIcon}
variant="accentPrimary"
/>
{/* InformationIcon */}
<IconButton
aria-label="Click me!"
icon={InformationIcon}
variant="neutralTertiary"
/>
{/* WarningIcon */}
<IconButton
aria-label="Click me!"
icon={WarningIcon}
variant="criticalTertiary"
/>
{/* ErrorIcon */}
<IconButton
aria-label="Click me!"
icon={ErrorIcon}
variant="criticalPrimary"
/>
Size
Customise the size of the button via the size prop. Defaults to "standard".
{/* large */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
size="large"
variant="accentPrimary"
/>
{/* standard */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
size="standard"
variant="accentPrimary"
/>
{/* small */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
size="small"
variant="accentPrimary"
/>
Disabled
Use the disable prop to show that a button isn’t usable.
{/* accentPrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isDisabled
variant="accentPrimary"
/>
{/* neutralPrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isDisabled
variant="neutralPrimary"
/>
{/* neutralSecondary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isDisabled
variant="neutralSecondary"
/>
{/* neutralSecondaryIntense */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isDisabled
variant="neutralSecondaryIntense"
/>
{/* criticalPrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isDisabled
variant="criticalPrimary"
/>
{/* accentSecondary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isDisabled
variant="accentSecondary"
/>
{/* neutralTertiary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isDisabled
variant="neutralTertiary"
/>
{/* criticalTertiary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isDisabled
variant="criticalTertiary"
/>
{/* inversePrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isDisabled
variant="inversePrimary"
/>
Loading
The icon is hidden and a loading indicator is shown in its place.
{/* accentPrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isLoading
variant="accentPrimary"
/>
{/* neutralPrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isLoading
variant="neutralPrimary"
/>
{/* neutralSecondary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isLoading
variant="neutralSecondary"
/>
{/* neutralSecondaryIntense */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isLoading
variant="neutralSecondaryIntense"
/>
{/* criticalPrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isLoading
variant="criticalPrimary"
/>
{/* accentSecondary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isLoading
variant="accentSecondary"
/>
{/* neutralTertiary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isLoading
variant="neutralTertiary"
/>
{/* criticalTertiary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isLoading
variant="criticalTertiary"
/>
{/* inversePrimary */}
<IconButton
aria-label="Click me!"
icon={AddIcon}
isLoading
variant="inversePrimary"
/>
API Reference
IconButton
| Prop | Type | Description | Default |
|---|---|---|---|
variant? | 'accentPrimary' | 'accentSecondary'| 'criticalPrimary'| 'criticalTertiary'| 'inversePrimary'| 'neutralPrimary'| 'neutralSecondary'| 'neutralSecondaryIntense'| 'neutralTertiary' | Variant of the button. | 'accentPrimary' |
size? | 'large' | 'standard' | 'small' | Size of the button. | 'standard' |
icon | Icon | Set the Icon for the button. | _ |
loadingLabel? | Icon | Text to read out to assistive technologies when button is loading | _ |
isDisabled? | boolean | If true, the button is disabled. | false |
isLoading? | boolean | If true ,the button will display a loading indicator. | false |
isPressed? | boolean | If true, the button will be visually styled as pressed and the aria-pressed attribute will be set accordingly. | _ |
type? | 'button' | 'submit' | 'reset' | Specifies the button type. | button |
id? | string | Specifies a unique id for the button. | _ |
aria-label | string | Describes the component to assistive tech users and the action or effect that will take place when the button is clicked. | _ |
aria-controls? | string | Identifies the element (or elements) that the button controls. | _ |
aria-expanded? | boolean | Indicates whether the button, or another element that it controls, is currently expanded or collapsed. | false |
aria-haspopup? | boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | Indicates the availability and type of interactive popup element, such as menu or dialog, triggered by the button. | _ |
onClick? | function | Function to call when the button is clicked. | _ |
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
Usage guidelines
Do
- Limited interface space: Utilize IconButton when interface space is restricted, prioritizing its use over a larger Button if space is a concern.
- Triggering modals: Use IconButton to trigger modals for completing related tasks, providing a clear visual indication of the action.
- Visual separation in text-heavy content: Employ IconButton to create visual separation of actions within text-heavy content, enhancing readability and user comprehension.
- Lower-emphasis actions: Apply IconButton for actions of lower emphasis that don't obstruct users from completing their primary tasks.
Don’t
- Non-actionable icons: Avoid using IconButton to display icons without associated actions; in such cases, use a standalone Icon.
- Multiple IconButton variants: Refrain from using multiple IconButtons with the same icon for different actions on a single surface.
- Text clarity and icon recognition: If text is more effective in conveying the action or the icon isn't quickly recognizable, consider using text instead of IconButton.
Best practices
Do
Utilize IconButton for executing low-emphasis actions, like opening a modal dialog to edit a board.
Don’t
Pair IconButton with a standard button to execute a high-emphasis action, positioning IconButton as a secondary action alongside regular buttons.