Group

Layout buttons and more with groups.

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.

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>
)

The disabled property will pass to children

XGroup and YGroup extend YStack, getting Tamagui standard props, plus: