Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

IconButton

A small utility component that composes Button and VisuallyHidden to provide simple, accessible buttons with icons.

Sancho exports:

  • IconButton: For creating buttons with any icons.
  • CloseButton: A standard IconButton with a close icon, used in the Dialog component.

Basic usage

IconButton accepts Sancho icons or any other react components via the icon prop. If provided with a Sancho icon, sizing and colour is handled for you. Otherwise, you need to manage the colour and sizing yourself.

The IconButton composes the Button component, so it accepts the same props as Button. A label prop is required for accessibility purposes.

Menu
<IconButton
  variant="outline"
  intent="primary"
  icon={<IconMenu />}
  label="Menu"
/>

Ghost variant

Menu
<IconButton icon={<IconMenu />} label="Menu" variant="ghost" />

CloseButton

We expose a CloseButton component which composes the IconButton component. This is used throughout Sancho, including the Dialog component.

Close
<CloseButton onPress={() => alert("Hello")} />

API

IconButton
label*string
A label required for accessibility
iconReactNode
The name of the icon you wish to render
colorstring
Change the colour
refRef<HTMLButtonElement>
componentReactType<any>
onPressOnPressFunction
Use onPress instead of onClick to handle both touch and click events
variant"outline" | "default" | "ghost"
Controls the basic button style.
intentButtonIntent
Controls the colour of the button.
blockboolean
If true, the button will be displayed as a block element instead of inline.
sizeButtonSize
The size of the button.
loadingboolean
Show a loading indicator
disabledboolean
iconBeforeReactNode
The name of the icon to appear to the left of the button text
iconAfterReactNode
The name of the icon to appear to the right of the button text
pressDelaynumber
By default, a button element will only highlight after a short delay to prevent unintended highlights when scrolling. You can set this to 0 if the element is not in a scrollable container
pressExpandPxnumber
By default, a touchable element will have an expanded press area of 20px on touch devices. This will only effect touch devices.
CloseButton
labelstring
An optional label for the close button
colorstring
Change the colour
refRef<HTMLButtonElement>
componentReactType<any>
onPressOnPressFunction
Use onPress instead of onClick to handle both touch and click events
variant"outline" | "default" | "ghost"
Controls the basic button style.
intentButtonIntent
Controls the colour of the button.
blockboolean
If true, the button will be displayed as a block element instead of inline.
sizeButtonSize
The size of the button.
loadingboolean
Show a loading indicator
disabledboolean
iconBeforeReactNode
The name of the icon to appear to the left of the button text
iconAfterReactNode
The name of the icon to appear to the right of the button text
pressDelaynumber
By default, a button element will only highlight after a short delay to prevent unintended highlights when scrolling. You can set this to 0 if the element is not in a scrollable container
pressExpandPxnumber
By default, a touchable element will have an expanded press area of 20px on touch devices. This will only effect touch devices.