Group
Layout buttons and more with groups.
Features
Accepts size prop that works on all styles.
Align vertically or horizontally.
Natural spacing and disabled props.
Usage
import { Button, XGroup } from 'tamagui'export default () => (<XGroup><Button>First</Button><Button>Second</Button><Button>Third</Button></XGroup>)
Instead of a generic Group
, Tamagui prefers XGroup
and YGroup
for consistency with stacks.
By default, Groups will control the border radius of their children automatically - the first and last children will get their start/end radius set to match group radius. If it's a YGroup
, it will adjust top/bottom radius. XGroup
adjusts the left/right radius.
This ensures any items inside will get appropriately scaled border radius.
Sizing
The size
property will use your tokens to grab the appropriate radius for borderRadius values which it will pass to the first and last child as style props for borderRadius.
import { Button, XGroup } from 'tamagui'export default () => (<XGroup size="$6"><Button>First</Button><Button>Second</Button><Button>Third</Button></XGroup>)
Disabled
The disabled
property will pass to children
Group API
XGroup and YGroup extend YStack, getting Tamagui standard props, plus:
Props
size
string | SizeTokens
Set a size, number or one of the size token values.
disabled
boolean
Pass disabled down to children.
disablePassBorderRadius
boolean
Disables passing border radius to first/last children.
vertical
boolean
Can be used to force an XGroup to render like a YGroup or vice-versa.