---
title: Group
category: General
summary: Used to lay out groups of elements like cards, buttons, and/or inputs.
---

```jsx live
render(
  <Group>
    <Button
      icon={{ name: 'email' }}
      tooltip={{ title: 'Email' }}
      variant="outline"
    />
    <Button
      icon={{ name: 'print' }}
      tooltip={{ title: 'Print' }}
      variant="outline"
    />
    <Button
      icon={{ name: 'csv-export' }}
      tooltip={{ title: 'CSV Export' }}
      variant="outline"
    />
  </Group>
)
```

```jsx live
render(
  <Group axis="vertical" maxWidth={60} fontSize={4} elevation={1}>
    <Card axis="horizontal" distribution="space-between" padding={2}>
      <Text>General Permissions</Text>
      <Text>Administrator</Text>
    </Card>
    <Card
      axis="horizontal"
      alignment="center"
      padding={2}
      color="grey-8"
      subdued
    >
      <Icon name="info" size="sm" color="grey-6" marginRight={2} />
      <Text>
        David is an <Link to="#">Organization Administrator</Link> with full
        Administrator permission everywhere.
      </Text>
    </Card>
    <Card axis="horizontal" distribution="space-between" padding={2}>
      <Text>File Access:</Text>
      <Text>Plan, Song, and Media</Text>
    </Card>
  </Group>
)
```

```jsx live
render(
  <ThemeProvider theme={{ group: { radius: 16 } }}>
    <Group size="md">
      <Button title="Email" variant="outline" />
      <Button
        icon={{ name: 'print', color: 'foregroundSecondary' }}
        tooltip={{ title: 'Print' }}
      />
    </Group>
  </ThemeProvider>
)
```

```jsx live
render(
  <Group radius={0} size="lg">
    <Input placeholder="Search things..." />
    <Button icon={{ name: 'search' }} tooltip={{ title: 'Search' }} />
  </Group>
)
```