Button

A button indicates a possible user action.

usage

import { Button, IconButton, ToggleButton, ToggleIconButton, ButtonGroup, ButtonAsLink } from "@sharegate/orbit-ui";

wai-aria

https://www.w3.org/WAI/ARIA/apg/patterns/button

sources

Github

Guidelines

When to use

• To trigger an action such as submitting a form, exporting data.
• To trigger a new UI element to appear on the page such as a modal.
• Progressing or regressing a user through a step.

Content

• Use strong, actionable verbs.
• Avoid using "click here" or "start here" as copy.

Button vs Link

• When you need to link to another page, use a link component.

ToggleButton vs Switch

• To activate or deactivate a feature, use the switch instead of a single toggle button.

Usage

Default

A default button.

<Button>Cutoff</Button>

Icon

A button can contain icons.

<Button variant="secondary">
    <PlaceholderMajorIcon />
    <Text>Cutoff</Text>
</Button>

End icon

Non standard end icons can be provided to handle special cases. However, think twice before adding end icons, start icons should be your go to.

<Button variant="secondary">
    <Text>Cutoff</Text>
    <PlaceholderMajorIcon slot="end-icon" />
</Button>

Counter

A button can contain a counter.

<Button variant="secondary">
    <Text>Cutoff</Text>
    <Counter variant="divider">60</Counter>
</Button>

Size

A button can vary in size.

<Inline alignY="center">
    <Button size="sm" variant="secondary">
        Cutoff
    </Button>
    <Button variant="secondary">Cutoff</Button>
</Inline>

Disabled

A button can be disabled.

<Button disabled>Cutoff</Button>

Loading

A button can show a loading indicator. The button text is hidden but the button maintains the width that it would have if the text were visible.

<Button loading variant="secondary">
    Loading
</Button>

Fluid

A button can be expanded to full width to fill its parent container.

<Button fluid variant="secondary">
    <PlaceholderMajorIcon />
    <Text>To infinity and beyond</Text>
</Button>

Variants

A button can use different variants.

Primary

Used to indicate the main action of a page or a section. This is usually the action we want the user to take.

In a button group, there can be only 1 primary button. This will be reserved for the suggested action.

<Inline>
    <Button variant="primary">Primary</Button>
</Inline>

Secondary

Secondary buttons are used for user actions that need less prominence in the page or the section. It’s also the button used when there are no suggested actions to the user.

<Inline>
    <Button variant="secondary">Negative</Button>
</Inline>

Tertiary

Tertiary buttons are used for actions that need to be there but that we don't want to encourage. A common use case would be a Cancel button in a message or an alert.

<Inline>
    <Button variant="tertiary">Negative</Button>
</Inline>

Negative

Negative buttons are used for actions that would result in a deletion or another non recoverable negative action. These are mostly useful in modals.

<Inline>
    <Button variant="negative">Negative</Button>
</Inline>

Link

A button can be rendered as a link by using the ButtonAsLink component.

<ButtonAsLink href="https://sharegate.com" target="_blank" variant="secondary">
    Cutoff
</ButtonAsLink>

Icon button

The content of a button can be a single icon. An accessible name must be provided through aria-label prop. See also WCAG practices.

<Inline alignY="center">
    <IconButton size="xs" variant="secondary" aria-label="Add owner">
        <PlaceholderMinorIcon />
    </IconButton>
    <IconButton size="sm" variant="secondary" aria-label="Add owner">
        <PlaceholderMajorIcon />
    </IconButton>
    <IconButton variant="secondary" aria-label="Add owner">
        <PlaceholderMajorIcon />
    </IconButton>
</Inline>

Icon link

An icon button can be rendered as a link by using the IconButtonAsLink component.

<IconButtonAsLink variant="secondary" aria-label="Add owner">
    <PlaceholderMajorIcon />
</IconButtonAsLink>

Button group

Buttons whose actions are related to each other can be grouped together.

<ButtonGroup>
    <Button variant="secondary">No, thanks</Button>
    <Button variant="secondary">Remind me later</Button>
    <Button variant="secondary">Rate Now</Button>
</ButtonGroup>

Orientation

A button group can render his items vertically.

<ButtonGroup orientation="vertical">
    <Button variant="secondary">No, thanks</Button>
    <Button variant="secondary">Remind me later</Button>
    <Button variant="secondary">Rate Now</Button>
</ButtonGroup>

Alignment

A button group can change the alignment of his items.

<ButtonGroup align="end">
    <Button variant="secondary">No, thanks</Button>
    <Button variant="secondary">Remind me later</Button>
    <Button variant="secondary">Rate Now</Button>
</ButtonGroup>

Toggle button

Offer a similar experience as a checkbox or radio with the appearance of a button.

<Inline>
    <ToggleButton variant="secondary">On</ToggleButton>
    <ToggleButton variant="secondary">
        <PlaceholderMajorIcon />
        <Text>Cutoff</Text>
    </ToggleButton>
</Inline>

Toggle icon button

A toggle button content can be a single icon. An accessible name must be provided through aria-label prop. See WCAG practices.

<ToggleIconButton variant="secondary" aria-label="Activate">
    <PlaceholderMajorIcon />
</ToggleIconButton>

Toggle button group

Related toggle buttons can be group together in a group, a checkbox group or a radio group:

<RadioGroup gap={2} orientation="horizontal">
    <ToggleButton value="none" variant="secondary">
        None
    </ToggleButton>
    <ToggleButton value="1" variant="secondary">
        1
    </ToggleButton>
    <ToggleButton value="2" variant="secondary">
        2
    </ToggleButton>
    <ToggleButton value="3" variant="secondary">
        3
    </ToggleButton>
    <ToggleButton value="4+" variant="secondary">
        4+
    </ToggleButton>
</RadioGroup>

Controlled

A toggle button can handle checked state in controlled mode.

() => {
    const [isChecked, setIsChecked] = useState(false);

    const handleChange = useCallback(
        (event, newValue) => {
            setIsChecked(x => !x);
            console.log(!newValue);
        },
        [setIsChecked]
    );

    return (
        <ToggleButton
            checked={isChecked}
            value="isActive"
            variant={isChecked ? "primary" : "secondary"}
            onChange={handleChange}
        >
            {isChecked ? "On" : "Off"}
        </ToggleButton>
    );
};

API

Button

usage

import { Button } from "@sharegate/orbit-ui";

slots

"icon", "text", "end-icon", "counter"

extends

• Button
• StyleProps

IconButton

usage

import { IconButton } from "@sharegate/orbit-ui";

extends

• Button
• StyleProps

ToggleButton

usage

import { ToggleButton } from "@sharegate/orbit-ui";

slots

"icon", "text", "end-icon"

extends

• Button
• StyleProps

ToggleIconButton

usage

import { ToggleIconButton } from "@sharegate/orbit-ui";

extends

• Button
• StyleProps

ButtonGroup

usage

import { ButtonGroup } from "@sharegate/orbit-ui";

extends

• Div
• StyleProps

ButtonAsLink

usage

import { ButtonAsLink } from "@sharegate/orbit-ui";

extends

• Button
• StyleProps

IconButtonAsLink

usage

import { IconButtonAsLink } from "@sharegate/orbit-ui";

extends

• Button
• StyleProps