Button

Buttons allow users to take actions, and make choices, with a single tap. They let users know what will happen next.

Basic Usage

import { Button } from '@krakentech/coral';
 
<Button>Button</Button>

Properties

color

<Button color="primary500">Primary</Button>
<Button color="secondary500">Secondary</Button>
<Button color="base100">Tertiary</Button>

disabled

<Button disabled>Button</Button>

fullHeight

<div style={{ height: 100 }}>
    <Button fullHeight>Button</Button>
</div>

fullWidth

<Button fullWidth>Button</Button>

href

<Button href="https://octopus.energy" target="_blank" rel="noopener noreferrer">
    Button
</Button>

endIcon

import { Button } from '@krakentech/coral';
import { IconChevronRight } from '@krakentech/icons';
 
<Button color="secondary500" endIcon={<IconChevronRight color="currentColor" />}>
    End icon
</Button>

startIcon

import { Button } from '@krakentech/coral';
import { IconChevronRight } from '@krakentech/icons';
 
<Button color="secondary500" startIcon={<IconChevronRight size={18} color="currentColor" />}>
    Start icon
</Button>

loading / loadingLabel

<Button loading loadingLabel="Downloading your data...">
    Button
</Button>

size

<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

variant

<Button variant="contained">Button</Button>
<Button variant="outlined">Button</Button>
<Button variant="ghost">Button</Button>
<Button variant="text">Button</Button>

Responsiveness

<Button
    color="secondary500"
    size="large"
    fullHeight={{ base: true, md: false }}
>
    Button
</Button>

Full API

Design

Good to know

Choose a button when you want the attract the users attention to perform and action, buttons usually encourage conversion. It is important to consider the level of emphasis the button you use provides, that it why we provide many themes and variations:

Color

• Primary (Pink - Soho lights): This should be used sparingly on a page, when you only see one pink button on a page it draws your attention there and it clear that it is the most important action the user could make.
• Secondary (Purple - Ink): These should be the most common button found on a page. Imagine the ratio on a landing page being one primary button and the rest secondary.
• Tertiary (White - Ice): As you’ve seen above most uses are covered by our primary and secondary options, and the many variations. However you may find a need for our tertiary button for menu selections.

Variant

• Filled: These buttons have a solid fill, used for important actions and draw maximum level attention.
• Outlined: These buttons have an outline but no solid fill, used to draw a moderate level of attention.
• Ghost: These buttons have no fill/outline but subtle fill upon hover, used to draw a low level of attention.
• Text: These buttons have no paddings. These are to be used in scenarios like menu selection.

Customisation

Our button component has many variations you can play with. Our components default with all properties turned on, however you can choose to toggle on and off the following:

• Start icon
• End icon
• Label

You can also customise colour and padding sizes.

Component breakdown

• Small: Item padding: 12px | Horizontal padding: 14px | Vertical padding: 8px
• Medium (Default): Item padding: 12px | Horizontal padding: 20px | Vertical padding: 16px
• Large: Item padding: 12px | Horizontal padding: 24px | Vertical padding: 20px
• Text: Button text & Heading 6
• Corner radius: 12px
• Border: 2px