wwwwwwwwwwwwwwwwwww

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>

  )

}

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

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

Props

  • orientation

    "horizontal" | "vertical"

    Forces applying the border radius styles to left/right vs top/bottom. Defaults to horizontal for XGroup and vertical for YGroup.

  • size

    string | SizeTokens

    Set a size, number or one of the size token values.

  • disabled

    boolean

    Pass disabled down to children.

  • disablePassBorderRadius

    boolean | 'bottom' | 'top' | 'start' | 'end'

    Disables passing border radius to first/last children.

  • forceUseItem

    boolean

  • unstyled

    boolean

    Removes all default Tamagui styles.

    •

    Group.Item

    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:

    Props

  • children (required)

    ReactNode

  • forcePlacement

    "first" | "center" | "last"

    Forces the item to be a starting, center or ending item and gets the respective styles

    • Previous

    Accordion

    Next

    Tabs

    Edit this page on GitHub.