<Button
  size="md"
  variant="solid"
  action="primary"
  isDisabled={false}
  isFocusVisible={false}
>
  <ButtonText>Add </ButtonText>
  <ButtonIcon as={AddIcon} />
</Button>

import {
  Button,
  ButtonText,
  ButtonIcon,
  ButtonSpinner,
  ButtonGroup,
} from "@gluestack-ui/themed"

export default () => (
  <ButtonGroup>
    <Button>
      <ButtonText />
      <ButtonSpinner />
      <ButtonIcon />
    </Button>
  </ButtonGroup>
)

<Button isDisabled={true} bg="$darkBlue600" p="$3">
  <ButtonSpinner mr="$1" />
  <ButtonText fontWeight="$medium" fontSize="$sm">
    Please wait...
  </ButtonText>
</Button>

<Button
  borderRadius="$full"
  size="lg"
  p="$3.5"
  bg="$indigo600"
  borderColor="$indigo600"
>
  {/* EditIcon is imported from 'lucide-react-native' */}
  <ButtonIcon as={EditIcon} />
</Button>

<Button variant="link">
  <ButtonText
    fontWeight="$medium"
    fontSize="$sm"
    color="$textLight900"
    $dark-color="$textDark300"
  >
    Back to top
  </ButtonText>
  <ButtonIcon
    as={ArrowUpIcon}
    h="$3"
    w="$3"
    color="$backgroundLight900"
    ml="$1"
    $dark-color="$backgroundDark300"
  />
</Button>

<HStack
  p="$12"
  alignItems="center"
  borderColor="$backgroundLight300"
  borderWidth={1}
  borderRadius="$lg"
  $dark-borderColor="$backgroundDark700"
>
  <Box maxWidth="$64" mr="$9">
    <Heading mb="$1.5">Was this page helpful?</Heading>
    <Text fontSize="$sm">
      We use this feedback to improve the quality of our documentation.
    </Text>
  </Box>
  <ButtonGroup space="md">
    <Button variant="outline" py="$2.5" action="secondary">
      <ButtonText fontSize="$sm" fontWeight="$medium">
        No
      </ButtonText>
    </Button>
    <Button
      variant="solid"
      bg="$success700"
      borderColor="$success700"
      $hover-bg="$success800"
      $active-bg="$success700"
    >
      <ButtonText fontSize="$sm" fontWeight="$medium">
        Yes
      </ButtonText>
    </Button>
  </ButtonGroup>
</HStack>

<Box>
  <Button>
    <ButtonIcon as={InfoIcon} mr="$2" />
    <ButtonText>Left Icon</ButtonText>
  </Button>
  <Button variant="solid" mt="$2">
    <ButtonText>Right Icon</ButtonText>
    <ButtonIcon as={AddIcon} ml="$2" />
  </Button>
</Box>

<Center>
  <Box
    p="$5"
    maxWidth="$96"
    borderWidth="$1"
    borderColor="$backgroundLight300"
    borderRadius="$lg"
    $dark-borderColor="$backgroundDark700"
  >
    <VStack space="xs" pb="$4">
      <Heading lineHeight={30}>Set new password</Heading>
      <Text fontSize="$sm">
        Almost done. Enter your new password and you are all set.
      </Text>
    </VStack>
    <VStack space="xl" py="$2">
      <Input>
        <InputField py="$2" placeholder="New password" />
      </Input>
      <Input>
        <InputField py="$2" placeholder="Confirm new password" />
      </Input>
    </VStack>
    <VStack space="lg" pt="$4">
      <Button size="sm">
        <ButtonText>Submit</ButtonText>
      </Button>
      <Box flexDirection="row">
        <Button variant="link" p="$0" size="sm">
          {/* ArrowLeftIcon is imported from 'lucide-react-native' */}
          <Icon size="md" mr="$1" as={ArrowLeftIcon} />
          <ButtonText>Back to login</ButtonText>
        </Button>
      </Box>
    </VStack>
  </Box>
</Center>

<ButtonGroup isAttached>
  <Button
    variant="outline"
    size="xs"
    borderColor="$backgroundLight300"
    borderRightWidth="$0"
    $dark-borderColor="$backgroundDark700"
  >
    <ButtonText color="$textLight900" $dark-color="$textDark300">
      Export
    </ButtonText>
  </Button>
  <Button
    variant="outline"
    size="xs"
    borderColor="$backgroundLight300"
    $dark-borderColor="$backgroundDark70"
  >
    <ButtonIcon
      as={ThreeDotsIcon}
      color="$textLight900"
      $dark-color="$textDark300"
    />
  </Button>
</ButtonGroup>