Group

Layout buttons and more with groups.

  • First
  • SecondSecond subtitle
  • Third
  • 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. It will also pass the size prop directly to children unless you set disablePassSize:

    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.

  • disablePassSize

    boolean

    Disables passing size to children.

  • vertical

    boolean

    Can be used to force an XGroup to render like a YGroup or vice-versa.