Button

Variants & appearances

Use variant and appearance property to choose the style of the button.

	primary	secondary	danger	warning	success	ai
fill
fill-light
text

import { Button } from 'swash/Button';

() => (
  <Button variant="primary" appearance="fill">
    Click me
  </Button>
);

Scales

Use scale property to change the size of the button.

	xs	sm	md	lg
fill
fill-light
text

import { Button } from 'swash/Button';

() => (
  <Button scale="md">
    Click me
  </Button>
);

Disabled

Use disabled property to put the button in a disabled state.

fill
fill-light
text

import { Button } from 'swash/Button';

() => (
  <Button disabled>
    Click me
  </Button>
);

With icons

Icons are naturally supported, just put it before or after text.

	xs	sm	md	lg
fill
fill-light
text

	xs	sm	md	lg
fill
fill-light
text

import { Button } from 'swash/Button';
import { IoArrowForward } from 'swash/Icon';

() => (
  <Button>
    <IoArrowForward /> Click me
  </Button>
);

Icons

Use iconOnly property to display the button as a "square".

	xs	sm	md	lg
fill
fill-light
text

import { Button } from 'swash/Button';
import { IoArrowDown } from 'swash/Icon';

() => (
  <Button iconOnly>
    <Icon />
  </Button>
);

Pressed

Use aria-pressed property to mark the button as pressed. Click on one button in the following example to show it as pressed.

	primary	secondary	danger	warning	success
fill
fill-light
text

import { Button } from 'swash/Button';

() => (
  <Button aria-pressed>
    Click me
  </Button>
);

Group

	xs	sm	md	lg
fill
fill-light

import { Button, ButtonGroup, ButtonSeparator } from 'swash/Button';
import { IoArrowDown } from 'swash/Icon';

() => (
  <ButtonGroup>
    <Button appearance="primary">
      Main
    </Button>
    <Button appearance="primary" iconOnly>
      <IoArrowDown />
    </Button>
  </ButtonGroup>
);

Hover group

Use hoverGroup to simulate the hover if it has a parent with the same group/button value.

import { Button } from 'swash/Button';

() => (
  <div className="group/button">
    <Button>Hover outside</Button>
  </div>
);

Render as child

Use asChild to render the button as the child. Could be used if you want to use your button as an anchor.

Google

import { Button } from 'swash/Button';

() => (
  <Button asChild>
    <a href="https://google.com">Google</a>
  </Button>
);