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" 
    isLoading
    size="xs"
    icon={<EditOutline18Icon />}
    aria-label="extra small button" 
  />
  <IconButton 
    variant="primary" 
    isLoading
    size="sm"
    icon={<EditOutline18Icon />}
    aria-label="small button" 
  />
  <IconButton 
    variant="primary" 
    isLoading
    size="md"
    icon={<EditOutline24Icon />}
    aria-label="medium button" 
  />
  <IconButton 
    variant="primary" 
    isLoading
    size="lg"
    icon={<EditOutline30Icon />}
    aria-label="large button" 
  />
</Flex>