# Icon Button

IconButtons are used to create pressable components (buttons) that render an
Icon. IconButtons are used for navigation between different screens or
performing core actions.

Please read the [Icon](../Icon/Icon.md) documentation for more information
regarding which icons to use.

## Mockup


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `accessibilityLabel` | `string` | Yes | — | Accessibilty label for the component. It's also used for testing |
| `name` | `IconNames` | Yes | — | The icon to show. |
| `badge` | `ReactNode` | No | — | a component that would render over the icon e.g. the number of notifications over the activity feed icon |
| `color` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour like quotes, jobs, and in... |
| `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
| `onPress` | `() => void` | No | — | Press handler |
| `testID` | `string` | No | — | Used to locate this button in tests |