Button
Buttons are clickable elements that are used to trigger actions.
Choose the type of button based on the importance of the action. The more important the action is, the more emphasis its button should have.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { Button } from '@adaptavant/eds-core';
Variants
The Button is available in 8 variants, accentPrimary is the default.
{/* accentPrimary */}
<Button variant="accentPrimary">
Click me!
</Button>
{/* accentSecondary */}
<Button variant="accentSecondary">
Click me!
</Button>
{/* criticalPrimary */}
<Button variant="criticalPrimary">
Click me!
</Button>
{/* criticalTertiary */}
<Button variant="criticalTertiary">
Click me!
</Button>
{/* neutralPrimary */}
<Button variant="neutralPrimary">
Click me!
</Button>
{/* neutralSecondary */}
<Button variant="neutralSecondary">
Click me!
</Button>
{/* neutralSecondaryIntense */}
<Button variant="neutralSecondaryIntense">
Click me!
</Button>
{/* neutralTertiary */}
<Button variant="neutralTertiary">
Click me!
</Button>Icons
The Button has iconStart and iconEnd props to set icons.
{/* iconStart */}
<Button iconStart={AddIcon}>
Click me!
</Button>
{/* iconEnd */}
<Button iconEnd={AddIcon}>
Click me!
</Button>Size
Customise the size of the Button via the size prop.
{/* small */}
<Button size="small">
Click me!
</Button>
{/* standard */}
<Button size="standard">
Click me!
</Button>
{/* large */}
<Button size="large">
Click me!
</Button>Disabled
Use the isDisabled prop to show that a button isn't usable.
{/* accentPrimary */}
<Button isDisabled variant="accentPrimary">
Click me!
</Button>
{/* accentSecondary */}
<Button isDisabled variant="accentSecondary">
Click me!
</Button>
{/* neutralPrimary */}
<Button isDisabled variant="neutralPrimary">
Click me!
</Button>
{/* neutralSecondary */}
<Button isDisabled variant="neutralSecondary">
Click me!
</Button>
{/* neutralSecondaryIntense */}
<Button isDisabled variant="neutralSecondaryIntense">
Click me!
</Button>
{/* neutralTertiary */}
<Button isDisabled variant="neutralTertiary">
Click me!
</Button>
{/* criticalPrimary */}
<Button isDisabled variant="criticalPrimary">
Click me!
</Button>
{/* criticalTertiary */}
<Button isDisabled variant="criticalTertiary">
Click me!
</Button>Loading
When the isLoading prop is set to true, text is hidden and a loading indicator is shown in its place, while maintaining the width that it would have if the text were visible.
{/* accentPrimary */}
<Button isLoading variant="accentPrimary">
Click me!
</Button>
{/* accentSecondary */}
<Button isLoading variant="accentSecondary">
Click me!
</Button>
{/* neutralPrimary */}
<Button isLoading variant="neutralPrimary">
Click me!
</Button>
{/* neutralSecondary */}
<Button isLoading variant="neutralSecondary">
Click me!
</Button>
{/* neutralSecondaryIntense */}
<Button isLoading variant="neutralSecondaryIntense">
Click me!
</Button>
{/* neutralTertiary */}
<Button isLoading variant="neutralTertiary">
Click me!
</Button>
{/* criticalPrimary */}
<Button isLoading variant="criticalPrimary">
Click me!
</Button>
{/* criticalTertiary */}
<Button isLoading variant="criticalTertiary">
Click me!
</Button>Size & Icons
The icons change size depending on the button size.
{/* small */}
<Button iconStart={AddIcon} size="small">
Click me!
</Button>
{/* standard */}
<Button iconStart={AddIcon} size="standard">
Click me!
</Button>
{/* large */}
<Button iconStart={AddIcon} size="large">
Click me!
</Button>Size & Loading
The loading indicator changes size depending on the button size.
{/* small */}
<Button isLoading size="small">
Click me!
</Button>
{/* standard */}
<Button isLoading size="standard">
Click me!
</Button>
{/* large */}
<Button isLoading size="large">
Click me!
</Button>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.
Button parts
{/* Styling the label and icon parts */}
<Button
className="bg-accent-secondary hover:bg-accent-secondary-hover"
classNames={{
iconStart: 'fill-secondary',
iconEnd: 'fill-secondary',
label: 'text-secondary',
labelTrack: 'gap-4',
}}
iconEnd={AddIcon}
iconStart={AddIcon}
>
Click here
</Button>
{/* Styling the loading parts */}
<Button
classNames={{
loading: 'stroke-[4px]',
loadingWrapper: 'border border-accent',
}}
isLoading
>
Click here
</Button>Stylable Parts | Description | |
|---|---|---|
label | The text content of the button. | |
labelTrack | The container that wraps the label. | |
iconStart | The icon displayed at the start of the button, before the label. | |
iconEnd | The icon displayed at the end of the button, after the label. | |
loading | The element which indicates the loading state of the button. | |
loadingWrapper | The container that wraps the loading indicator. | _ |
Usage guidelines
Do
- Use clear labels: Provide a concise and descriptive label on the button that clearly communicates its purpose.
- Consistent styling: Ensure consistent design and styling across all buttons in your user interface for a cohesive look.
- Accessibility: Make buttons accessible by adding proper HTML attributes and ARIA labels for screen readers.
- Proper sizing: Choose an appropriate size for the button based on its importance and context in the interface.
- Hover and active states: Define clear hover and active states to give users feedback when interacting with the button.
Don’t
- Avoid ambiguity: Don't use vague labels or icons on buttons that might confuse users about their function.
- Overcomplicate: Avoid adding too many actions or functionalities to a single button. Keep buttons simple and focused.
- Inconsistent placement: Don't place buttons in unpredictable locations across your interface. Follow established design patterns.
- Tiny click targets: Don't create buttons with extremely small click targets, as they can be frustrating to use on touch devices.
- Ignoring mobile responsiveness: Don't forget to ensure that buttons work well and are responsive on various screen sizes, including mobile devices.
Best practices
Do
Display complete text on Buttons, and when they can't fit horizontally, stack them vertically.
Don’t
Shorten the Button text. In exceptional cases where Buttons must remain on a single line, prioritise truncating the text on the secondary Button before truncating the text on the primary Button.
Do
Display complete text on Buttons, and when they can't fit horizontally, stack them vertically.
Don’t
Shorten the Button text. In exceptional cases where Buttons must remain on a single line, prioritize truncating the text on the secondary Button before truncating the text on the primary Button.
Do
Maintain Button text that is straightforward and prompts action.
Don’t
Avoid incorporating icons into a Button to emphasise the text.
Do
Employ sentence-case capitalisation.
Don’t
Opt for title case capitalisation or all uppercase (all caps).