Group

Layout buttons and more with groups

import { Activity, Airplay } from '@tamagui/lucide-icons'
import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'

export function GroupDemo() {
  return (
    <YStack padding="$3" space="$2" alignItems="center">
      <Group orientation="horizontal">
        <Group.Item>
          <Button>First</Button>
        </Group.Item>
        <Group.Item>
          <Button>Second</Button>
        </Group.Item>
        <Group.Item>
          <Button>Third</Button>
        </Group.Item>
      </Group>

      {/* responsive + size */}
      <XGroup size="$3" $gtSm={{ size: '$5' }}>
        <XGroup.Item>
          <Button size="$3" icon={Activity}>
            First
          </Button>
        </XGroup.Item>
        <XGroup.Item>
          <Button size="$3" icon={Airplay}>
            Second
          </Button>
        </XGroup.Item>
      </XGroup>

      {/* Separator */}
      <YGroup separator={<Separator />}>
        <YGroup.Item>
          <ListItem title="First" />
        </YGroup.Item>
        <YGroup.Item>
          <ListItem title="Second" subTitle="Second subtitle" />
        </YGroup.Item>
        <YGroup.Item>
          <ListItem>Third</ListItem>
        </YGroup.Item>
      </YGroup>
    </YStack>
  )
}

Usage

You can use Group by itself with the orientation property determining the direction it assumes.

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.

You can use Groups with or without Group.Item, depending on if you want to spacing and separators to be handled based on direct children, or on each Item rendered.

import { Button, XGroup } from 'tamagui'

// usage with Item:
export default () => (
  <XGroup>
    <XGroup.Item>
      <Button>First</Button>
    </XGroup.Item>
    <XGroup.Item>
      <Button>Second</Button>
    </XGroup.Item>
    <XGroup.Item>
      <Button>Third</Button>
    </XGroup.Item>
  </XGroup>
)

For a simpler use case and backwards compat, you can also use it without Group.Item, which will just apply borders and spacing based on direct children. Note that Group will detect if any Group.Item is inside it, and automatically switch modes. If no Item, it spaces direct children:

import { Button, XGroup } from 'tamagui'

// usage without Item:
export default () => (
  <XGroup>
    <Button>First</Button>
    <Button>Second</Button>
    <Button>Third</Button>
  </XGroup>
)

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">
    <XGroup.Item>
      <Button>First</Button>
    </XGroup.Item>
    <XGroup.Item>
      <Button>Second</Button>
    </XGroup.Item>
    <XGroup.Item>
      <Button>Third</Button>
    </XGroup.Item>
  </XGroup>
)

Disabled

The disabled property will pass to children

API Reference

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

Wrap each of XGroup or YGroup's children in one of these. It lets Tamagui apply the needed styles to them. It accepts the following props: