# Component/Banner

> Props: component-banner.props.txt

## Examples


### Base

```tsx
{
  args: {
    title: 'Title',
    message: 'Info Banner Message'
  }
}
```

### Custom Icon

```tsx
{
  render: () => {
    const custom_icons: { [key in BannerKind]: React.ComponentType<IconProps> } = {
      neutral: IconCircleQuestion,
      info: IconPlus,
      error: IconX,
      success: IconEyeOn,
      warning: IconRocket
    } as const;
    return <Stack direction='column' gap={8}>
        {(['neutral', 'info', 'error', 'warning', 'success'] as BannerKind[]).map(kind => {
        return <Banner iconComponent={custom_icons[kind]} key={kind} title={kind} message='Normal Banner Message' kind={kind as BannerKind} />;
      })}
      </Stack>;
  }
}
```

### Direction

```tsx
{
  args: {
    actions: <TextButton size='small' color={semantic_colors.accent.primary}>
        Action
      </TextButton>,
    closeButton: true,
    onClose: () => alert('onClose')
  },
  render: args => <Stack direction='row' gap={12}>
      <Stack direction='column' gap={8} width='100%'>
        <BaseText>horizontal</BaseText>
        <Banner title='Title' message='Normal Banner Message' size='medium' {...args} />
        <Banner title='Title' message='Normal Banner Message' size='small' {...args} />
        <Banner title='Title' message='Normal Banner Message' size='xsmall' {...args} />
      </Stack>
      <Stack direction='column' gap={8} width='100%'>
        <BaseText>vertical</BaseText>
        <Banner title='Title' message='Normal Banner Message' size='medium' direction='vertical' {...args} />
        <Banner title='Title' message='Normal Banner Message' size='small' direction='vertical' {...args} />
        <Banner title='Title' message='Normal Banner Message' size='xsmall' direction='vertical' {...args} />
      </Stack>
    </Stack>
}
```

### Kind

```tsx
{
  render: () => <Stack direction='column' gap={8}>
      {(['neutral', 'info', 'error', 'success', 'warning'] as BannerKind[]).map(kind => {
      return <Banner key={kind} title='Title' message='Normal Banner Message' kind={kind as BannerKind} closeButton actions={<TextButton size='small' color={banner_color_css[kind]}>
                Action
              </TextButton>} />;
    })}
    </Stack>
}
```

### No Body Text

```tsx
{
  args: {
    title: 'Info Banner Title'
  }
}
```

### No Icon

```tsx
{
  args: {
    kind: 'info',
    title: 'Title',
    message: 'Info Banner Message',
    showIcon: false
  }
}
```

### No Title

```tsx
{
  args: {
    message: 'Info Banner Message'
  }
}
```

### Size

```tsx
{
  args: {
    actions: <TextButton size='small' color={semantic_colors.accent.primary}>
        Action
      </TextButton>,
    closeButton: true,
    onClose: () => alert('onClose')
  },
  render: args => <Stack direction='column' gap={8}>
      <Banner title='Title' message='Normal Banner Message' size='medium' {...args} />
      <Banner title='Title' message='Normal Banner Message' size='small' {...args} />
      <Banner title='Title' message='Normal Banner Message' size='xsmall' {...args} />
    </Stack>
}
```

### With Action Close

```tsx
{
  args: {
    kind: 'info',
    title: 'Title',
    message: 'Info Banner Message',
    actions: <TextButton size='small' color={semantic_colors.accent.primary}>
        Action
      </TextButton>,
    closeButton: true,
    onClose: () => alert('onClose')
  }
}
```

### Word Break

```tsx
{
  render: () => <Stack direction='column' width={400}>
      <Banner title='텍스트가 박스의 크기보다 길어질 경우 아래로 개행되어야 합니다.' message='텍스트가 박스의 크기보다 길어질 경우 아래로 개행되어야 합니다.' closeButton actions={<TextButton size='small' color={banner_color_css.info}>
            Action
          </TextButton>} />
    </Stack>
}
```