Components

Button

Buttons are the most basic interaction element in a user interface, as they allow users to perform actions or navigate the interface. They have multiple styles for various needs and let you do an action or navigation on the site.

Examples

A simple example

<Button variant="primary" size="md">
  Click me
</Button>

Different variants

<ButtonGroup flexWrap="wrap" gap={2} spacing={0}>
  <Button 
    variant="primary"
    size="md"
  >
    Primary
  </Button>
  <Button 
    variant="secondary"
    size="md"
  >
    Secondary
  </Button>
  <Button 
    variant="tertiary"
    size="md"
  >
    Tertiary
  </Button>
  <Button 
    variant="ghost"
    size="md"
  >
    Ghost
  </Button>
  <Button 
    variant="floating"
    size="md"
  >
    Floating
  </Button>
</ButtonGroup>

Different sizes

<Flex gap={1} flexWrap="wrap" alignItems="center">
  <Button variant="primary" size="lg">Size lg</Button>
  <Button variant="primary" size="md">Size md</Button>
  <Button variant="primary" size="sm">Size sm</Button>
  <Button variant="primary" size="xs">Size xs</Button>
</Flex>

Buttons with icons

<Flex gap={1} flexWrap="wrap" alignItems="center">
  <Button variant="primary" leftIcon={<SearchOutline24Icon />}>
    Search
  </Button>
  <Button variant="primary" rightIcon={<DropdownDownFill24Icon />} width="100%">
    Look more
  </Button>
  <Button
    variant="primary"
    leftIcon={<SearchOutline24Icon />} 
    rightIcon={<DropdownDownFill24Icon />}
    maxWidth="400px"
    width="100%"
  >
    Such flex
  </Button>
</Flex>

A button in loading mode

<Button variant="primary" isLoading>Vennligst vent</Button>

A disabled button

<Button variant="primary" isDisabled>
  Submit
</Button>