Components

IconButton

Icon Button is a round button with no text and one icon only.

Examples

Different variants

<Flex gap={1} flexWrap="wrap" alignItems="center">
  <IconButton 
    variant="primary" 
    icon={<EditOutline24Icon />}
    aria-label="primary button" 
  />
  <IconButton 
    variant="secondary" 
    icon={<EditOutline24Icon />}
    aria-label="secondary button" 
  />
  <IconButton 
    variant="tertiary" 
    icon={<EditOutline24Icon />}
    aria-label="tertiary button" 
  />
  <IconButton 
    variant="ghost" 
    icon={<EditOutline24Icon />}
    aria-label="ghost button" 
  />
  <IconButton 
    variant="floating" 
    icon={<EditOutline24Icon />}
    aria-label="floating button" 
  />
</Flex>

Different sizes

<Flex gap={1} flexWrap="wrap" alignItems="center">
  <IconButton 
    variant="primary" 
    size="xs"
    icon={<EditOutline18Icon />}
    aria-label="extra small button" 
  />
  <IconButton 
    variant="primary" 
    size="sm"
    icon={<EditOutline18Icon />}
    aria-label="small button" 
  />
  <IconButton 
    variant="primary" 
    size="md"
    icon={<EditOutline24Icon />}
    aria-label="medium button" 
  />
  <IconButton 
    variant="primary" 
    size="lg"
    icon={<EditOutline30Icon />}
    aria-label="large button" 
  />
</Flex>

Loading icon buttons

<Flex gap={1} flexWrap="wrap" alignItems="center">
  <IconButton 
    variant="primary" 
    loading
    size="xs"
    icon={<EditOutline18Icon />}
    aria-label="extra small button" 
  />
  <IconButton 
    variant="tertiary" 
    loading
    size="sm"
    icon={<EditOutline18Icon />}
    aria-label="small button" 
  />
  <IconButton 
    variant="primary" 
    loading
    size="md"
    icon={<EditOutline24Icon />}
    aria-label="medium button" 
  />
  <IconButton 
    variant="tertiary" 
    loading
    size="lg"
    icon={<EditOutline30Icon />}
    aria-label="large button" 
  />
</Flex>

Guidelines

Icon Button is a round button with no text and one icon only. This button reacts to touches by filling with color.

Remember to include a good descriptive text for screen reader users!

Code

`<IconButton />`

import { IconButton } from "@vygruppen/spor-react";

Props

Name	Type	Description
`variant`	`"primary" \| "secondary" \| "tertiary" \| "ghost" \| "floating"`
`size`	`"xs" \| "sm" \| "md" \| "lg"`	Default "md"
`icon`	`React.ReactNode`
`aria-label`	`string`	A descriptive text
`disabled`	`boolean`
`waiting`	`boolean`
`download`	`string[]`	link to a downloadable resource
`href`	`string[]`	Use this combined with as="a" and download prop

Fundamentals

Getting started