# Component/Button/AccordionButton

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

## Examples


### Base

AccordionButton 버튼으로써의 동작만 제공함으로 오픈여부에 노출되는 컨텐츠부의 애니메이션 및 컨트롤은 사용처에서 처리합니다.

```tsx
{
  args: {
    children: 'Label'
  },
  parameters: {
    docs: {
      description: {
        story: 'AccordionButton 버튼으로써의 동작만 제공함으로 오픈여부에 노출되는 컨텐츠부의 애니메이션 및 컨트롤은 사용처에서 처리합니다.'
      }
    }
  },
  render: args => {
    const button_size_keys = reverse(Object.keys(accordion_button_size_css));
    const [open, setOpen] = useState<Record<string, boolean>>(() => button_size_keys.reduce((acc, item) => ({
      ...acc,
      [item]: false
    }), {}));
    return <Stack gap={12} align='center'>
        {button_size_keys.map(key => <AccordionButton {...args} key={key} size={key as AccordionButtonSize} opened={open[key]} onClick={() => setOpen(prev => ({
        ...prev,
        [key]: !prev[key]
      }))} />)}
      </Stack>;
  }
}
```

### Disabled

AccordionButton 버튼으로써의 동작만 제공함으로 오픈여부에 노출되는 컨텐츠부의 애니메이션 및 컨트롤은 사용처에서 처리합니다.

```tsx
{
  args: {
    children: 'Label'
  },
  parameters: {
    docs: {
      description: {
        story: 'AccordionButton 버튼으로써의 동작만 제공함으로 오픈여부에 노출되는 컨텐츠부의 애니메이션 및 컨트롤은 사용처에서 처리합니다.'
      }
    }
  },
  render: args => {
    const button_size_keys = reverse(Object.keys(accordion_button_size_css));
    const [open, setOpen] = useState<Record<string, boolean>>(() => button_size_keys.reduce((acc, item) => ({
      ...acc,
      [item]: false
    }), {}));
    return <Stack gap={12} align='center'>
        {button_size_keys.map(key => <AccordionButton {...args} key={key} size={key as AccordionButtonSize} opened={open[key]} onClick={() => setOpen(prev => ({
        ...prev,
        [key]: !prev[key]
      }))} />)}
      </Stack>;
  },
  args: {
    children: 'Label',
    disabled: true
  }
}
```

### Fill

AccordionButton 버튼으로써의 동작만 제공함으로 오픈여부에 노출되는 컨텐츠부의 애니메이션 및 컨트롤은 사용처에서 처리합니다.

```tsx
{
  args: {
    children: 'Label'
  },
  parameters: {
    docs: {
      description: {
        story: 'AccordionButton 버튼으로써의 동작만 제공함으로 오픈여부에 노출되는 컨텐츠부의 애니메이션 및 컨트롤은 사용처에서 처리합니다.'
      }
    }
  },
  render: args => {
    const button_size_keys = reverse(Object.keys(accordion_button_size_css));
    const [open, setOpen] = useState<Record<string, boolean>>(() => button_size_keys.reduce((acc, item) => ({
      ...acc,
      [item]: false
    }), {}));
    return <Stack gap={12} align='center'>
        {button_size_keys.map(key => <AccordionButton {...args} key={key} size={key as AccordionButtonSize} opened={open[key]} onClick={() => setOpen(prev => ({
        ...prev,
        [key]: !prev[key]
      }))} />)}
      </Stack>;
  },
  args: {
    fill: true,
    children: 'Label'
  }
}
```

### With Tooltip

AccordionButton 버튼으로써의 동작만 제공함으로 오픈여부에 노출되는 컨텐츠부의 애니메이션 및 컨트롤은 사용처에서 처리합니다.

```tsx
{
  args: {
    children: 'Label'
  },
  parameters: {
    docs: {
      description: {
        story: 'AccordionButton 버튼으로써의 동작만 제공함으로 오픈여부에 노출되는 컨텐츠부의 애니메이션 및 컨트롤은 사용처에서 처리합니다.'
      }
    }
  },
  render: args => {
    const button_size_keys = reverse(Object.keys(accordion_button_size_css));
    const [open, setOpen] = useState<Record<string, boolean>>(() => button_size_keys.reduce((acc, item) => ({
      ...acc,
      [item]: false
    }), {}));
    return <Stack gap={12} align='center'>
        {button_size_keys.map(key => <AccordionButton {...args} key={key} size={key as AccordionButtonSize} opened={open[key]} onClick={() => setOpen(prev => ({
        ...prev,
        [key]: !prev[key]
      }))} />)}
      </Stack>;
  },
  args: {
    leftAddon: <Popover placement='bottom' content={<HelpText title='Help Text Title' contents={[{
      text: 'Help Text'
    }]} />}>
        <Stack align='center'>
          <IconCircleQuestion color={semantic_colors.content.tertiary} />
        </Stack>
      </Popover>,
    children: 'Label'
  }
}
```