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>
Show Code
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>
Show Code
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>
Show Code
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>
Show Code
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>
Show Code
Custom component
<Button component="a" href="http://www.benmcmahen.com"> Anchor button </Button>
Show Code
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.
cssInterpolationWithTheme<any>