Group

Layout buttons and more with groups.

  • First
  • Second
  • Third
  • Features

    • Accepts size prop that works on all styles.

    • Align vertically or horizontally.

    • Natural spacing and disabled props.

    Usage

    import { Button, Group } from 'tamagui'
    export default () => (
    <Group>
    <Button>First</Button>
    <Button>Second</Button>
    <Button>Third</Button>
    </Group>
    )

    By default, Group will control the border radius of it's children automatically - the first and last children will get their start/end radius set to match group radius. If it's a vertical group, it will adjust top/bottom radius, if not, left/right.

    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, Group } from 'tamagui'
    export default () => (
    <Group size="$6">
    <Button>First</Button>
    <Button>Second</Button>
    <Button>Third</Button>
    </Group>
    )

    Disabled

    The disabled property will pass to children

    Group API

    Group extends YStack, getting Tamagui standard props, plus:

    Props

  • vertical

    boolean

    Renders vertical content with rounded edges at top/bottom.

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