<Buttonsize="md"variant="solid"action="primary"isDisabled={false}isFocusVisible={false}><ButtonText>Add </ButtonText><ButtonIcon as={AddIcon} /></Button>
import { Button } from "@gluestack-ui/themed"
export default () => (<ButtonGroup><Button><ButtonText /><ButtonSpinner /><ButtonIcon /></Button></ButtonGroup>)
Prop | Type | Default | Description |
---|---|---|---|
isHovered | bool | false | To manually set hover to the button. |
isPressed | bool | false | To manually set pressable state to the button. |
isFocused | bool | false | To manually set focused state to the button. |
isDisabled | bool | false | To manually set disable to the button. |
Sx Prop | Description |
---|---|
_text | Prop to style ButtonText Component |
_icon | Prop to style ButtonIcon Component |
_spinner | Prop to style ButtonSpinner Component |
Prop | Type | Default | Description |
---|---|---|---|
direction | 'column' | 'row' | 'row' | Set the direction of Button group to vertical or horizontal |
isDisabled | bool | false | When true, this will disable all the buttons in a ButtonGroup. |
isAttached | bool | false | When attached, all buttons will be attached to each other. |
reversed | bool | false | To reverse the order of components. |
space | string | md | It sets the space between different buttons. |
Sx Prop | Description |
---|---|
_button | Prop to style Button Component |
Name | Value | Default |
---|---|---|
action | primary | secondary | positive | negative | default | primary |
variant | link | outline | solid | solid |
size | xs | sm | md | lg | xl | md |
<Button isDisabled={true} bg="$darkBlue600" p="$3"><ButtonSpinner mr="$1" /><ButtonText fontWeight="$medium" fontSize="$sm">Please wait...</ButtonText></Button>
<ButtonborderRadius="$full"size="lg"p="$3.5"bg="$indigo600"borderColor="$indigo600">{/* EditIcon is imported from 'lucide-react-native' */}<ButtonIcon as={EditIcon} /></Button>
<Button variant="link"><ButtonTextfontWeight="$medium"fontSize="$sm"color="$textLight900"sx={{_dark: {color: "$textDark300",},}}>Back to top</ButtonText><ButtonIconas={ArrowUpIcon}h="$3"w="$3"color="$backgroundLight900"ml="$1"sx={{_dark: {color: "$backgroundDark300",},}}/></Button>
<HStackp="$12"alignItems="center"borderColor="$backgroundLight300"borderWidth={1}borderRadius="$lg"sx={{_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><Buttonvariant="solid"bg="$success700"borderColor="$success700"sx={{":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><Boxp="$5"maxWidth="$96"borderWidth="$1"borderColor="$backgroundLight300"borderRadius="$lg"sx={{_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><Buttonvariant="outline"size="xs"borderColor="$backgroundLight300"borderRightWidth="$0"sx={{_dark: {borderColor: "$backgroundDark700",},}}><ButtonTextcolor="$textLight900"sx={{_dark: {color: "$textDark300",},}}>Export</ButtonText></Button><Buttonvariant="outline"size="xs"borderColor="$backgroundLight300"sx={{_dark: {borderColor: "$backgroundDark700",},}}><ButtonIconas={ThreeDotsIcon}color="$textLight900"sx={{_dark: {color: "$textDark300",},}}/></Button></ButtonGroup>