# Source: https://tamagui.dev/ui/group.md

---
title: Group
description: Render horizontal or vertical groups easily.
name: group
component: Group
demoName: Group
---

# Group

<Description>Layout buttons and more with groups.</Description>

<HeroContainer>
  <GroupDemo />
</HeroContainer>

```tsx hero template=Group

```

<Highlights
  features={[
    'Accepts size prop that works on all styles.',
    'Align vertically or horizontally.',
    'Natural spacing and disabled props.',
    'Use with or without Item for more control.',
  ]}
/>

## Usage

You can use `Group` by itself with the `axis` 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.

```tsx
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:

```tsx
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.

```tsx
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

<HeroContainer>
  <GroupDisabledDemo />
</HeroContainer>

## Group API

### Group

`Group`, `XGroup`and`YGroup` extend [YStack](/docs/components/stacks), getting [Tamagui standard props](/docs/intro/props), plus:

<PropsTable
  data={[
    {
      name: 'axis',
      required: false,
      type: '"horizontal" | "vertical"',
      description: `Forces applying the border radius styles to left/right vs top/bottom. Defaults to horizontal for XGroup and vertical for YGroup.`,
    },
    {
      name: 'size',
      required: false,
      type: 'string | SizeTokens',
      description: `Set a size, number or one of the size token values.`,
    },
    {
      name: 'disabled',
      required: false,
      type: 'boolean',
      description: `Pass disabled down to children.`,
    },
    {
      name: 'disablePassBorderRadius',
      required: false,
      type: `boolean | 'bottom' | 'top' | 'start' | 'end'`,
      description: `Disables passing border radius to first/last children.`,
    },
    {
      name: 'forceUseItem',
      required: false,
      type: 'boolean',
      desctiption: `Can be used to force the group to assume it has Item components as children.`,
    },
  ]}
/>

### Group.Item

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

Accepts only a `children` prop.