render(
<StackView spacing={2}>
<StackView axis="horizontal" alignment="start" spacing={1}>
{['xs', 'sm', 'md', 'lg'].map((size) => (
<Button
key={size}
size={size}
title="person"
spinner={true}
variant="outline"
/>
))}
</StackView>
<StackView axis="horizontal" alignment="start" spacing={1}>
{['xs', 'sm', 'md', 'lg'].map((size) => (
<Button key={size} size={size} title="Button" />
))}
</StackView>
<StackView axis="horizontal" alignment="start" spacing={1}>
{['xs', 'sm', 'md', 'lg'].map((size) => (
<Button
key={size}
size={size}
title="Button"
iconLeft={{ name: 'general.twoPeople' }}
/>
))}
</StackView>
<StackView axis="horizontal" alignment="start" spacing={1}>
{['xs', 'sm', 'md', 'lg'].map((size) => (
<Button
key={size}
size={size}
title="Button"
iconRight={{ name: 'general.downCaret' }}
/>
))}
</StackView>
<StackView axis="horizontal" alignment="start" spacing={1}>
{['xs', 'sm', 'md', 'lg'].map((size) => (
<Button
key={size}
size={size}
icon={{ name: 'general.person' }}
tooltip={{ title: 'person' }}
radius="circle"
/>
))}
</StackView>
</StackView>
)