Button

Github

stable

Buttons communicate the action that will occur when the user clicks them. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. They contain a text label to describe the action, and an icon if appropriate.

Import

import { Button } from '@contentful/f36-components';
// or
import { Button } from '@contentful/f36-button';

Examples

Variants

Button has 5 different variants:

Open in Playground
function ButtonVariantsExample() {
  return (
    <Stack>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="negative">Negative</Button>
      <Button variant="positive">Positive</Button>
      <Button variant="transparent">Transparent</Button>
    </Stack>
  );
}
function ButtonVariantsExample() {
  return (
    <Stack>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="negative">Negative</Button>
      <Button variant="positive">Positive</Button>
      <Button variant="transparent">Transparent</Button>
    </Stack>
  );
}
Hide source

Sizes

Button has 3 different sizes:

Open in Playground
function ButtonSizesExample() {
  return (
    <Stack>
      <Button size="large">Large</Button>
      <Button size="medium">Medium</Button>
      <Button size="small">Small</Button>
    </Stack>
  );
}
function ButtonSizesExample() {
  return (
    <Stack>
      <Button size="large">Large</Button>
      <Button size="medium">Medium</Button>
      <Button size="small">Small</Button>
    </Stack>
  );
}
Hide source

States

Open in Playground
function ButtonStatesExample() {
  return (
    <Stack>
      <Button isActive>Active</Button>
      <Button isDisabled>Disabled</Button>
      <Button isLoading>Loading</Button>
    </Stack>
  );
}
function ButtonStatesExample() {
  return (
    <Stack>
      <Button isActive>Active</Button>
      <Button isDisabled>Disabled</Button>
      <Button isLoading>Loading</Button>
    </Stack>
  );
}
Hide source

Full width

Open in Playground
function ButtonFullWidthExample() {
  return <Button isFullWidth>Full Width Button</Button>;
}
function ButtonFullWidthExample() {
  return <Button isFullWidth>Full Width Button</Button>;
}
Hide source

Rendered as a tag

By default, button is rendered as a button tag. But you can change it to a tag, by providing as prop. Don't forget to pass href prop as well.

Open in Playground
function ButtonAsAExample() {
  return (
    <Button as="a" href="https://www.contentful.com/" target="_blank">
      Visit Contentful
    </Button>
  );
}
function ButtonAsAExample() {
  return (
    <Button as="a" href="https://www.contentful.com/" target="_blank">
      Visit Contentful
    </Button>
  );
}
Hide source

With icons

You can add an icon by providing the following props:

Open in Playground
function ButtonWithIconExample() {
  return (
    <Stack>
      <Button startIcon={<PlusIcon />}>Add</Button>
      <Button endIcon={<ChevronDownIcon />}>Menu</Button>
    </Stack>
  );
}
function ButtonWithIconExample() {
  return (
    <Stack>
      <Button startIcon={<PlusIcon />}>Add</Button>
      <Button endIcon={<ChevronDownIcon />}>Menu</Button>
    </Stack>
  );
}
Hide source

Props (API reference)

Content guidelines

Accessibility