#IconButton

import IconButton from "@poodle/ui/IconButton";

IconButton is a component use for a single action. We should add aria-label to the component to help the screen reader understand what is it used for.

#Shape

By the default the IconButton is round. We can change to square shape by using shapeStyle prop.

import ClearIcon from "@poodle/icons/react/Clear";

<IconButton aria-label="Clear">
    <ClearIcon />
</IconButton>

<IconButton aria-label="Clear" shapeStyle="square">
    <ClearIcon />
</IconButton>

#Color

IconButton support basic colors.

import ClearIcon from "@poodle/icons/react/Clear";
import ErrorIcon from "@poodle/icons/react/Error";
import WarnIcon from "@poodle/icons/react/Warn";
import CheckIcon from "@poodle/icons/react/Check";

<IconButton>
    <ClearIcon />
</IconButton>

<IconButton disabled={true}>
    <ClearIcon />
</IconButton>

<IconButton colorStyle="primary">
    <CheckIcon />
</IconButton>

<IconButton colorStyle="positive">
    <CheckIcon />
</IconButton>

<IconButton colorStyle="negative">
    <ErrorIcon />
</IconButton>

<IconButton colorStyle="warn">
    <WarnIcon />
</IconButton>

#Theming

Please check theming component document here.

export type IconButtonStyleKeys = "root"

export interface IconButtonThemeConfig
  extends StandardThemeConfig<IconButtonStyleKeys, IconButtonProps> {}

#Props

#Local Props

Name	Type	Description
children	`React.ReactNode`
href	`string`	Render `<a>` tag instead button
shapeStyle	`"round" \\| "square"`	Change component shape. Square shape is useful to create button group.

#Full Props

export interface IconButtonProps
    extends BoxProps<"button">,
        StandardComponentProps,
        LocalIconButtonProps {}