Button

Buttons communicate the action that will occur when the user touches them.

Import Syntax

xxxxxxxxxx
 
import Button, { ButtonGroup } from 'calcite-react/Button';

Basic Usage

 
<Button onClick={() => console.log('clicked')}>default</Button>

Appearances

inline

transparent

clear

clearGray

halo

red

green

clearWhite

white

 
<GuideExample label="inline">
  <Button inline onClick={() => console.log('clicked')}>
    inline
  </Button>
</GuideExample>
<GuideExample label="transparent">
  <Button transparent onClick={() => console.log('clicked')}>
    transparent
  </Button>
</GuideExample>
<GuideExample label="clear">
  <Button clear onClick={() => console.log('clicked')}>
    clear
  </Button>
</GuideExample>
<GuideExample label="clearGray">
  <Button clearGray onClick={() => console.log('clicked')}>
    clear-gray
  </Button>
</GuideExample>
<GuideExample label="halo">
  <Button halo onClick={() => console.log('clicked')}>
    halo
  </Button>
</GuideExample>
<GuideExample label="red">
  <Button red onClick={() => console.log('clicked')}>
    red
  </Button>
</GuideExample>
<GuideExample label="green">
  <Button green onClick={() => console.log('clicked')}>
    green
  </Button>
</GuideExample>
<GuideExample
  label="clearWhite"
  style={{ background: CalciteTheme.palette.offBlack }}
>
  <Button clearWhite onClick={() => console.log('clicked')}>
    clear-white
  </Button>
</GuideExample>
<GuideExample
  label="white"
  style={{ background: CalciteTheme.palette.offBlack }}
>
  <Button white onClick={() => console.log('clicked')}>
    white
  </Button>
</GuideExample>

Sizes

extraSmall

small

large

extraLarge

half

fullWidth

 
<GuideExample label="extraSmall">
  <Button extraSmall onClick={() => console.log('clicked')}>
    extraSmall
  </Button>
</GuideExample>
<GuideExample label="small">
  <Button small onClick={() => console.log('clicked')}>
    small
  </Button>
</GuideExample>
<GuideExample label="large">
  <Button large onClick={() => console.log('clicked')}>
    large
  </Button>
</GuideExample>
<GuideExample label="extraLarge">
  <Button extraLarge onClick={() => console.log('clicked')}>
    extraLarge
  </Button>
</GuideExample>
<GuideExample label="half">
  <Button half onClick={() => console.log('clicked')}>
    half
  </Button>
</GuideExample>
<GuideExample label="fullWidth">
  <Button fullWidth onClick={() => console.log('clicked')}>
    fullWidth
  </Button>
</GuideExample>

Hyperlink

Link button

 
<Button
  href="https://esri.com"
  target="_blank"
  onClick={() => console.log('clicked')}
>
  Link button
</Button>

Disabled

 
<Button disabled onClick={() => console.log('clicked')}>
  disabled
</Button>

Grouped

 
<ButtonGroup>
  <Button onClick={() => console.log('clicked')}>One</Button>
  <Button onClick={() => console.log('clicked')}>Two</Button>
  <Button onClick={() => console.log('clicked')}>Three</Button>
</ButtonGroup>

With Icon

iconPosition="before"

iconButton

iconButton white

 
<GuideExample>
  <Button
    onClick={() => console.log('clicked')}
    icon={<DownloadToIcon size={16} />}
  >
    Download
  </Button>
</GuideExample>
<GuideExample label='iconPosition="before"'>
  <Button
    onClick={() => console.log('clicked')}
    icon={<SaveIcon size={16} />}
    iconPosition="before"
  >
    Save
  </Button>
</GuideExample>
<GuideExample label="iconButton">
  <Button
    iconButton
    icon={<AppLauncherIcon />}
    onClick={() => console.log('clicked')}
  />
</GuideExample>
<GuideExample
  label="iconButton white"
  style={{ background: CalciteTheme.palette.offBlack }}
>
  <Button
    iconButton
    white
    icon={<AppLauncherIcon filled />}
    onClick={() => console.log('clicked')}
  />
</GuideExample>

Toggle Button Group

 
() => {
  class ButtonGroupStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selected: 1,
      }
      this.selectButton = this.selectButton.bind(this)
    }
​
    selectButton(selected) {
      this.setState({
        selected,
      })
    }
​
    render() {
      return (
        <ButtonGroup isToggle>
          <Button
            clear={this.state.selected !== 1}
            onClick={() => {
              this.selectButton(1)
            }}
          >
            One
          </Button>
          <Button
            clear={this.state.selected !== 2}
            onClick={() => {
              this.selectButton(2)
            }}
          >
            Two
          </Button>
          <Button
            clear={this.state.selected !== 3}
            onClick={() => {
              this.selectButton(3)
            }}
          >
            Three
          </Button>
          <Button
            clear={this.state.selected !== 4}
            onClick={() => {
              this.selectButton(4)
            }}
          >
            Four
          </Button>
          <Button
            clear={this.state.selected !== 5}
            onClick={() => {
              this.selectButton(5)
            }}
          >
            Five
          </Button>
        </ButtonGroup>
      )
    }
  }
  return <ButtonGroupStory />
}

Props

Button `default`

Property	Type	Required	Default	Description
type	Enum	false	button	The HTML type property of the Button.
iconPosition	Enum	false	after	The position of the icon in relation to other children in a Button.
children	Node	false	-	The content of the component; text or icon.
inline	Bool	false	-	Style prop used to render an inline Button.
transparent	Bool	false	-	Style prop used to render a transparent Button.
clear	Bool	false	-	Style prop used to render a clear Button.
clearGray	Bool	false	-	Style prop used to render a clear-gray Button.
clearWhite	Bool	false	-	Style prop used to render a clear-white Button.
white	Bool	false	-	Style prop used to render a white Button.
extraSmall	Bool	false	-	Style prop used to render an extra small Button.
small	Bool	false	-	Style prop used to render a small Button.
large	Bool	false	-	Style prop used to render a large Button.
extraLarge	Bool	false	-	Style prop used to render an extra large Button.
fullWidth	Bool	false	-	Style prop used to render a 100% width Button.
half	Bool	false	-	Style prop used to render a 50% width Button.
red	Bool	false	-	Style prop used to render a red Button.
green	Bool	false	-	Style prop used to render a green Button.
disabled	Bool	false	-	The HTML disabled property of the Button.
href	String	false	-	The HTML href property of the Button.
icon	Node	false	-	The icon that will be displayed as the content of a Button.
iconButton	Bool	false	-	A style prop used to adjust size and padding of Buttons with only an icon as its content.

ButtonGroup

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component; should be a number of Buttons.
isToggle	Bool	false	-	Style prop used to help adjust margins and positioning of Buttons when one is active.

Calcite React