@guardian/src-button

Buttons

📣 For more context and visual guides relating to button usage, visit the Source Design System website

Install

$ yarn add @guardian/src-button @guardian/src-foundations

Use

import { LinkButton, Button } from "@guardian/src-button"
import { SvgCheckmark, SvgArrowRightStraight } from "@guardian/src-svgs"

const Form = () => (
    <form>
        <LinkButton
            priority="primary"
            size="default"
            showIcon={true}
            href="/read-more"
        >
            Read more
        </LinkButton>
        <Button
            priority="primary"
            size="default"
            icon={<SvgCheckmark />}
            iconSide="left"
            onClick={() => {
                alert("Thanks for clicking")
            }}
        >
            Click me
        </Button>
    </form>
)

LinkButton Props

priority

"primary" | "secondary" = "primary"

Informs users of how important an action is

size

"default" | "small" = "default"

Reflects the prominance of the action

showIcon

boolean = false

Whether to show the arrow icon in this button

Button Props

priority

"primary" | "secondary" | "tertiary" = "primary"

Informs users of how important an action is

size

"default" | "small" = "default"

Reflects the prominance of the action

icon

JSX.Element

An icon that appears inside the button, alongside text

iconSide

"left" | "right" = "left"

The side of the button on which the icon appears

Supported themes

Standard

• default
• brand
• brandAlt

Custom

• readerRevenue
• readerRevenueAlt