Button

A button triggers an event or action. They let users know what will happen next.

#Default

Use a button to trigger an action.

import { Button } from '@wolf-rayet/react';

<Button>Default button</Button>

#Appearance

Use appearance to communicate the intent of the action.

import { Button } from '@wolf-rayet/react';

{APPEARANCES.map((appearance) => (
  <Button key={appearance} appearance={appearance}>
    {appearance.charAt(0).toUpperCase() + appearance.slice(1)} button
  </Button>
))}

#Spacing

Use compact spacing in dense interfaces where vertical space is limited.

import { Button } from '@wolf-rayet/react';

<Button appearance="primary">Default</Button>
<Button appearance="primary" spacing="compact">Compact</Button>

#Icons

Add an icon before or after the label to help people scan for an action.

import { Button } from '@wolf-rayet/react';

<Button iconBefore={<Plus />}>Create</Button>
<Button iconAfter={<ChevronDown />}>More actions</Button>
<Button appearance="primary" iconBefore={<Plus />}>Create issue</Button>

#Disabled

Use a disabled button when an action is unavailable until something else happens.

import { Button } from '@wolf-rayet/react';

<Button isDisabled>Disabled button</Button>
<Button appearance="primary" isDisabled>Disabled primary</Button>

#Selected

Use a selected button to show the current state of a toggle.

import { Button } from '@wolf-rayet/react';

<Button isSelected>Selected button</Button>
<Button isSelected iconBefore={<Plus />}>Selected with icon</Button>

#Full width

Use shouldFitContainer when the button should fill its container, such as in a narrow form.

import { Button } from '@wolf-rayet/react';

<div style={{ inlineSize: '100%' }}>
  <Button appearance="primary" shouldFitContainer>Sign up</Button>
</div>

#Link button

Use a link button to take people to a new location.

Go to documentation Get started

import { LinkButton } from '@wolf-rayet/react';

<LinkButton href="/components/button/code">Go to documentation</LinkButton>
<LinkButton appearance="primary" href="/components/button/code">Get started</LinkButton>

#Icon button

Use an icon button when space is limited. Always provide a label so the action is announced.

import { IconButton, LinkIconButton } from '@wolf-rayet/react';

<IconButton icon={<Plus />} label="Create" />
<IconButton icon={<Plus />} label="Create" appearance="primary" />
<IconButton icon={<Plus />} label="Create" shape="circle" appearance="primary" />
<IconButton icon={<Plus />} label="Create" spacing="compact" />
<LinkIconButton icon={<ChevronDown />} label="Open menu" href="#" />

#Split button

Use a split button to pair a primary action with related actions in a menu.

import { Button, SplitButton } from '@wolf-rayet/react';

<SplitButton appearance="primary">
  <Button appearance="primary">Create</Button>
  <Button appearance="primary" aria-label="More create options" iconBefore={<ChevronDown />} />
</SplitButton>
<SplitButton>
  <Button>Save</Button>
  <Button aria-label="More save options" iconBefore={<ChevronDown />} />
</SplitButton>

#Button group

Use a button group to show related actions together.

import { Button, ButtonGroup } from '@wolf-rayet/react';

<ButtonGroup label="Issue actions">
  <Button appearance="primary">Save</Button>
  <Button>Cancel</Button>
</ButtonGroup>