Button

<Button text="Medium-sized button" />

function Example() {
  const [disabled, setDisabled] = React.useState(false);
  const [tabIndex, setTabIndex] = React.useState(false);
  return (
    <Flex alignItems="start" direction="column" gap={6}>
      <Flex gap={2}>
        <Tooltip text="Default button">
          <Button
            onClick={() => {}}
            text="Clear search history"
            disabled={disabled}
            tabIndex={tabIndex ? -1 : 0}
          />
        </Tooltip>
        <Tooltip text="Submit button">
          <Button
            type="submit"
            name="satisfaction-questionnaire"
            text="Submit your response"
            disabled={disabled}
            tabIndex={tabIndex ? -1 : 0}
          />
        </Tooltip>
        <Tooltip text="Link button">
          <Button
            role="link"
            target="blank"
            href="https://www.pinterest.com"
            text="Visit pinterest.com"
            disabled={disabled}
            tabIndex={tabIndex ? -1 : 0}
          />
        </Tooltip>
      </Flex>
      <Flex gap={2}>
        <Switch
          onChange={() => setDisabled(!disabled)}
          id="disable-buttons"
          switched={disabled}
        />
        <Box paddingX={2} flex="grow">
          <Label htmlFor="disable-buttons">
            <Text>Disable buttons</Text>
          </Label>
        </Box>
      </Flex>
      <Flex gap={2}>
        <Switch
          onChange={() => setTabIndex(!tabIndex)}
          id="unreachable-buttons"
          switched={tabIndex}
        />
        <Box paddingX={2} flex="grow">
          <Label htmlFor="unreachable-buttons">
            <Text>Remove from keyboard navigation with tabIndex</Text>
          </Label>
        </Box>
      </Flex>
    </Flex>
  );
}

<Flex gap={2}>
  <Button size="sm" text="Small-sized button" />
  <Button text="Medium-sized button" />
  <Button size="lg" text="Large-sized button" />
</Flex>

function Example() {
  const [selectedTransparent, setSelectedTransparent] = React.useState(false);
  const [selectedSemiTransparentWhite, setSelectedSemiTransparentWhite] = React.useState(false);
  return (
    <Flex>
      <Box column={4} padding={2}>
        <Box margin={3}>
          <Button
            text="Toggle text color & compare contrast"
            onClick={() => setSelectedTransparent((currentValue) => !currentValue)}
            selected={selectedTransparent}/>
        </Box>
        <Image
          alt="Image to compare contrast between text color and background."
          color="rgb(231, 186, 176)"
          naturalHeight={751}
          naturalWidth={564}
          src="https://i.ibb.co/7bQQYkX/stock2.jpg"
        >
          <Box padding={2}>
          <Button
            color={selectedTransparent ? 'transparentWhiteText' : 'transparent'}
            iconEnd="add-pin"
            text="Save this image"
          />
          </Box>
          <Box padding={2} position="absolute" bottom right>
            <Button
            color={selectedTransparent ? 'transparent' : 'transparentWhiteText'}
            iconEnd="pin-hide"
            text="Hide this image"
          />
          </Box>
        </Image>
      </Box>
      <Box column={4} padding={2}>
        <Box margin={3}>
          <Button
            text="Toggle button color & compare transparency"
            onClick={() => setSelectedSemiTransparentWhite((currentValue) => !currentValue)}
            selected={selectedSemiTransparentWhite}/>
        </Box>
        <Image
        alt="Image to compare contrast between button color and background."
          color="rgb(231, 186, 176)"
          naturalHeight={751}
          naturalWidth={564}
          src="https://i.ibb.co/7bQQYkX/stock2.jpg"
        >
          <Box padding={2}>
          <Button
            color={selectedSemiTransparentWhite ? 'semiTransparentWhite' : 'white'}
            iconEnd="add-pin"
            text="Save this image"
          />
          </Box>
          <Box padding={2} position="absolute" bottom right>
            <Button
            color={selectedSemiTransparentWhite ? 'white' : 'semiTransparentWhite'}
            iconEnd="pin-hide"
            text="Hide this image"
            inline />
          </Box>
        </Image>
      </Box>
    </Flex>
  )
};

<React.Fragment>
  <Box padding={2}>
    <Button text="Default inline button" />
  </Box>
  <Box padding={2}>
    <Button fullWidth text="Full-width button" />
  </Box>
</React.Fragment>

<Button iconEnd="download" text="Download CVS file" />

function Example() {
  const [selected, setSelected] = React.useState(false);
  return (
    <Button
      selected={selected}
      onClick={() => {setSelected(!selected)}}
      text={selected ? "Selected" : "Deselected"}
    />
  );
}

function ButtonPopoverExample() {
  const [selected, setSelected] = React.useState(false);
  const anchorRef = React.useRef(null);
  return (
    <React.Fragment>
      <Button
        onClick={() => setSelected(!selected)}
        ref={anchorRef}
        selected={selected}
        text={selected ? "Hide Popover" : "Show Popover"}
      />
      {selected && (
        <Popover
          anchor={anchorRef.current}
          idealDirection="right"
          onDismiss={() => setSelected(false)}
          shouldFocus={false}
        >
          <Box padding={3}>
            <Text weight="bold">This is a Button with an anchor ref to a Popover component</Text>
          </Box>
        </Popover>
      )}
    </React.Fragment>
  );
}

function AccessibilityExample() {
  const [selected, setSelected] = React.useState(false);
  return (
    <Button
      accessibilityLabel={selected ? "Unfollow Alberto on Pinterest" : "Follow Alberto on Pinterest"}
      onClick={() => setSelected(!selected)}
      selected={selected}
      text={selected ? "Unfollow" : "Follow"}        />
  );
}

function MenuButtonExample() {
  const [selected, setSelected] = React.useState(false);
  const anchorRef = React.useRef();
  return (
    <React.Fragment>
      <Box display="inlineBlock" ref={anchorRef}>
        <Button
          accessibilityControls="menu"
          accessibilityExpanded={selected}
          accessibilityHaspopup
          selected={selected}
          onClick={() => setSelected(!selected)}
          text="Menu"
        />
      </Box>
      {selected && (
        <Layer>
          <Popover
            anchor={anchorRef.current}
            idealDirection="down"
            onDismiss={() => setSelected(false)}
            positionRelativeToAnchor={false}
            size="md"
          >
            <Box id="menu" direction="column" display="flex" padding={2}>
              <Box padding={2}>
                <Text weight="bold">
                  Option 1
                </Text>
              </Box>
              <Box padding={2}>
                <Text weight="bold">
                  Option 2
                </Text>
              </Box>
            </Box>
          </Popover>
        </Layer>
      )}
    </React.Fragment>
  );
}