# Component/Button/PopoverButton

> Props: component-button-popoverbutton.props.txt

## Examples


### Custom Button

```tsx
{
  render: (args) => (
    <Stack direction='row' gap={8} align='center'>
      <PopoverButton {...args}>{args.children}</PopoverButton>
    </Stack>
  ),
  args: {
    children: '버튼 Kind',
    value: 'value-1',
    options,
    kind: 'primary'
  }
}
```

### Disabled

```tsx
{
  render: (args) => (
    <Stack direction='row' gap={8} align='center'>
      <PopoverButton {...args}>{args.children}</PopoverButton>
    </Stack>
  ),
  args: {
    disabled: true,
    children: '팝오버 버튼',
    value: 'value-1',
    options
  }
}
```

### Icon Popover Button

```tsx
{
  render: (args) => (
    <Stack direction='row' gap={8} align='center'>
      <PopoverButton {...args}>{args.children}</PopoverButton>
    </Stack>
  ),
  args: {
    useIconButton: true,
    value: 'value-1',
    options
  }
}
```

### Loading

```tsx
{
  render: (args) => (
    <Stack direction='row' gap={8} align='center'>
      <PopoverButton {...args}>{args.children}</PopoverButton>
    </Stack>
  ),
  args: {
    loading: true,
    children: '팝오버 버튼',
    value: 'value-1',
    options
  }
}
```

### Long

```tsx
{
  render: (args) => (
    <Stack direction='row' gap={8} align='center'>
      <PopoverButton {...args}>{args.children}</PopoverButton>
    </Stack>
  ),
  args: {
    children: 'Long Long Long Long Content',
    value: 'value-1',
    options
  }
}
```

### Short

```tsx
{
  render: (args) => (
    <Stack direction='row' gap={8} align='center'>
      <PopoverButton {...args}>{args.children}</PopoverButton>
    </Stack>
  ),
  args: {
    children: '짦음',
    value: 'value-1',
    options
  }
}
```