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

Button

Sancho offers your standard button variants, modelled after those provided by Bootstrap. You can alter size, intent, and variant depending upon your needs. The IconButton composes Button.

Basic usage

Basic Button
<Button onPress={() => alert("Pressed")}>Basic Button</Button>

Intent

Similar to Bootstrap, you can style your buttons by setting the intent prop.

Default Button
Primary Button
Success Button
Danger Button
Warning Button
<div className="Button-example">
  <Button>Default Button</Button>
  <Button intent="primary">Primary Button</Button>
  <Button intent="success">Success Button</Button>
  <Button intent="danger">Danger Button</Button>
  <Button intent="warning">Warning Button</Button>
</div>

Sizes

Extra small
Small
Medium
Large
Extra large
<div className="Button-example">
  <Button size="xs">Extra small</Button>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
  <Button size="xl">Extra large</Button>
</div>

Variants

Default variant
Ghost variant
Outline variant
<div className="Button-example">
  <Button variant="default">Default variant</Button>
  <Button variant="ghost">Ghost variant</Button>
  <Button variant="outline">Outline variant</Button>
</div>

With Icons

Default variant
Default variant
Default variant
Default variant
Default variant
Ghost variant
Outline variant
<div className="Button-example">
  <Button size="xs" iconBefore={<IconArrowRight />} variant="default">
    Default variant
  </Button>
  <Button size="sm" iconBefore={<IconChevronDown />} variant="default">
    Default variant
  </Button>
  <Button
    intent="primary"
    size="md"
    iconBefore={<IconAperture />}
    variant="default"
  >
    Default variant
  </Button>
  <Button size="lg" iconBefore={<IconAward />} variant="default">
    Default variant
  </Button>
  <Button size="xl" iconBefore={<IconCalendar />} variant="default">
    Default variant
  </Button>
  <Button variant="ghost" iconAfter={<IconChevronDown />}>
    Ghost variant
  </Button>
  <Button variant="outline" intent="primary" iconAfter={<IconArrowRight />}>
    Outline variant
  </Button>
</div>

Loading

Click me to toggle loading
<Component initialState={{ isLoading: false }}>
  {({ state, setState }) => (
    <Button
      intent="primary"
      variant="outline"
      onPress={() => setState({ isLoading: !state.isLoading })}
      loading={state.isLoading}
    >
      Click me to toggle loading
    </Button>
  )}
</Component>

Disabled

Default variant
Ghost variant
Outline variant
<div className="Button-example">
  <Button disabled variant="default">
    Default variant
  </Button>
  <Button disabled variant="ghost">
    Ghost variant
  </Button>
  <Button disabled variant="outline">
    Outline variant
  </Button>
</div>

Custom component

<Button component="a" href="http://www.benmcmahen.com">
  Anchor button
</Button>

API

Button
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.