import CodeRender from '../../../components/CodeRender'

# Expand component size shape style

## introduce

If you want to make some modifications to the behavior, size, shape and style of each component, you must use the `components` configuration item:

For example, we want to add `4` sizes to `button`, `xl`, `2xl`, `3xl`, `4xl`

We can use the following writing method (it is recommended to use Css string directly or a function to return a string)

```js filename="icestack.config.cjs"
/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  components: {
    // component name
    button: {
      extend: {
        //utils
        utils: [
          // Sizes
          //xl and 2xl
          `.btn-xl {
             @apply min-h-20 h-20 px-8;
             font-size: 1.25rem;
           }
           .btn-2xl {
             @apply min-h-24 h-24 px-10;
             font-size: 1.5rem;
           }
           `,
          // 3xl 4xl
          ({ selector }) => {
            return `
             ${selector}-3xl{
              @apply min-h-28 h-28 px-12;
              font-size: 1.75rem;
             }
               ${selector}-4xl {
                 @apply min-h-32 h-32 px-14;
                 font-size: 2rem;
               }`
          }
        ]
      }
    }
  }
}
module.exports = config
```

### Generate results

<CodeRender className='space-y-2' code={`
<div class="flex space-x-2 items-center">
<span>Extends</span>

<button class="btn btn-4xl">4xl</button>
<button class="btn btn-3xl">3xl</button>
<button class="btn btn-2xl">2xl</button>
<button class="btn btn-xl">xl</button>
</div>
<div class="flex space-x-2 items-center">
<span>Default</span>

<button class="btn btn-lg">Large</button>
<button class="btn btn-md">Normal</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-xs">Tiny</button>
</div>
`}></CodeRender>

```html
<button class="btn btn-4xl">4xl</button>
<button class="btn btn-3xl">3xl</button>
<button class="btn btn-2xl">2xl</button>
<button class="btn btn-xl">xl</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-md">Normal</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-xs">Tiny</button>
```

### Examples

https://github.com/sonofmagic/icestack/blob/main/website/icestack/components/button.js
