Button

Used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.

ButtonProps

Chakra UI Button

Button is built with Chakra UI Button. Visual appearance is defined by the variant property. It also supports a set of common style props for width height, margin and padding.

Base example

import { Button } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Button>Click to enter Casper 2.0</Button>;
}

Loading state

Pass the isLoading prop to show its loading state. The button will show a spinner and leave the button’s width unchanged. When isLoading is set to true, the button will also be disabled.

You can also pass the loadingText prop to show a spinner and the loading text.

import { Button } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <>
      <Button isLoading variant="primary">
        Click to enter Casper 2.0
      </Button>
      <Button isLoading loadingText="Loading Casper UI">
        Click to enter Casper 2.0
      </Button>
    </>
  );
}

Button as link

The Button component can be used as a link element (renders HTML a-tag, but appears as a Button) by providing a value to the href property. This should only be used when the Button has the behaviour of a link, but still for some (hopefully well thought out) reason should appear as a Button.

Using variant="link" will not render the Button as a link element, it is only a visual variant. If you want the appearance of a link and link behaviour, again, use the Link-component.

Note also that there is no such thing as a disabled link, prefer using a disabled regular button in this case, and no href prop. The href attribute is required for an anchor to be keyboard accessible.

import { Button } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Button
      href="https://caspeco.github.io/casper-ui-library/components/button"
      target="_blank"
      variant="primary"
    >
      Open docs in new tab
    </Button>
  );
}

Button with icon

Use the props iconLeft or iconRight prop to add a icon to the button.

import { BackIcon, Button, ForwardIcon } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <>
      <Button variant="tertiary" leftIcon={BackIcon}>
        Tillbaka
      </Button>
      <Button variant="tertiary" rightIcon={ForwardIcon}>
        Nästa
      </Button>
    </>
  );
}

Variants

All the different variants

import { Button, Flex } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Flex direction={"column"} alignItems={"center"} gap={"10px"}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="tertiary">Tertiary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="alert">Alert</Button>
      <Button variant="link">Link</Button>
    </Flex>
  );
}

Sizes

All different sizes

import {
  BackIcon,
  Box,
  Button,
  Grid,
  Stack,
  Text,
  ThemeColor,
  ThemeFontSize,
} from "@caspeco/casper-ui-library";

export default function Demo() {
  const variants = ["primary", "secondary", "tertiary", "ghost", "alert", "link"] as const;
  const sizes = ["xs", "sm", "md", "lg", "xl"] as const;

  return (
    <Stack gap="24px">
      {variants.map((variant) => (
        <Stack key={variant} gap="8px">
          <Text fontWeight="bold">{variant.charAt(0).toUpperCase() + variant.slice(1)}</Text>
          <Grid
            templateColumns="repeat(5, auto)"
            gap="16px"
            alignItems="center"
            border="1px solid"
            borderColor={ThemeColor.OnBackgroundSubdued}
            padding="16px"
            borderRadius="8px"
          >
            {/* Size headers */}
            {sizes.map((size) => (
              <Text
                key={`${size}-header`}
                fontSize={ThemeFontSize.Small}
                textAlign="center"
                color={ThemeColor.OnBackgroundHeader}
              >
                {size.toUpperCase()}
              </Text>
            ))}

            {/* Buttons for each size */}
            {sizes.map((size) => (
              <Box key={`box-${variant}-${size}`} display="flex" alignItems="center" justifyContent="center">
                <Button key={`${variant}-${size}`} variant={variant} size={size}>
                  Button
                </Button>
              </Box>
            ))}
          </Grid>
        </Stack>
      ))}

      {/* Icon button variant */}
      <Stack gap="8px">
        <Text fontWeight="bold">With Icon</Text>
        <Grid
          templateColumns="repeat(5, auto)"
          gap="16px"
          alignItems="center"
          border="1px solid"
          borderColor={ThemeColor.OnBackgroundSubdued}
          padding="16px"
          borderRadius="8px"
        >
          {/* Size headers */}
          {sizes.map((size) => (
            <Text
              key={`${size}-header`}
              fontSize={ThemeFontSize.Small}
              textAlign="center"
              color={ThemeColor.OnBackgroundHeader}
            >
              {size.toUpperCase()}
            </Text>
          ))}

          {/* Buttons with icon for each size */}
          {sizes.map((size) => (
            <Button key={`icon-${size}`} variant="tertiary" leftIcon={BackIcon} size={size}>
              Button
            </Button>
          ))}
        </Grid>
      </Stack>
    </Stack>
  );
}