
## Feature Examples


### Icon size
- description: Control plus icon size inside of a button:<br/>
        &emsp;- `small` (default) - use it when the button’s width is 30 pixels or smaller.<br/>
        &emsp;- `medium` - use it when the button's width is larger than 30 pixels.
- example: 
```jsx 
<StorybookComponents.Stack gap="12px">
  <FillButton iconSize="small" tooltipContent="Small"/>
  <FillButton iconSize="medium" tooltipContent="Medium"/>
</StorybookComponents.Stack>;
```

### Fill
- description: Set the button's fill-in HEX color or linear gradient. Component allows control of the gradient direction.
- example: 
```jsx 
<StorybookComponents.Stack gap="24px">
  <FillButton tooltipContent="no fill" />
  <FillButton fill="#3399ff" tooltipContent="hex" />
  <FillButton
    fill="linear-gradient(#73d2de, #3399ff)"
    tooltipContent="linear gradient"
  />
  <FillButton
    fill="linear-gradient(to right top, #73d2de, #3399ff)"
    tooltipContent="to right top linear gradient"
  />
</StorybookComponents.Stack>;
```

### Disabled
- description: Restrict button interactions with `disabled` prop. This will prevent users from adding a new swatch.
- example: 
```jsx 
<StorybookComponents.Stack>
  <FillButton disabled />
</StorybookComponents.Stack>;
```

### Tooltip
- description: Explain the action with a message in a tooltip.
        Control the tooltip position and behaviour by passing relevant properties via `tooltipProps`.
- example: 
```jsx 
<StorybookComponents.Stack>
  <FillButton
    tooltipContent="Message explaining the action"
    tooltipProps={{
      placement: 'right',
      maxWidth: 400,
    }}
  />
</StorybookComponents.Stack>;
```

### Icon
- description: Display a custom icon inside of a button using icon prop.<br/>
      <br/>
      Default icon is a plus and is displayed all the time unless specified otherwise.<br/>
      <br/>
      Overridden icon size cannot be controlled using `iconSize` property. Size has to be controlled manually.
- example: 
```jsx 
<StorybookComponents.Stack gap="12px">
  <FillButton tooltipContent="Add"/>
  <FillButton icon={<Icons.EditSmall/>} tooltipContent="Edit"/>
</StorybookComponents.Stack>;
```




    


## Common Use Case Examples


### Adding custom swatch
- description: Use a fill button to add new fill options to the existing list.
        It’s recommended to place it as the first item on the list, because it won’t be moved down when new colors appear, letting the user always find it.<br/>
        <br/>
        It can be used with `<FileUpload/>` to open a native file picker to upload images.
- example: 
```jsx 
() => {
  const [selectedId, setSelectedId] = React.useState(0);

  return (
    <Layout gap="12px">
      <FileUpload multiple accept=".jpeg,.gif,.png">
        {({ openFileUploadDialog }) => (
          <FillButton
            iconSize="medium"
            tooltipContent="Upload image"
            onClick={openFileUploadDialog}
          />
        )}
      </FileUpload>
      <Tooltip content="Black & white geometric shapes" size="small">
        <FillPreview
          fill="PatternExample4.jpg"
          selected={selectedId === 1}
          onClick={() => setSelectedId(1)}
        />
      </Tooltip>
      <Tooltip content="Multicolored wallpaper" size="small">
        <FillPreview
          fill="PatternExample5.jpg"
          selected={selectedId === 2}
          onClick={() => setSelectedId(2)}
        />
      </Tooltip>
      <Tooltip content="Color twirl pattern" size="small">
        <FillPreview
          fill="PatternExample6.jpg"
          selected={selectedId === 3}
          onClick={() => setSelectedId(3)}
        />
      </Tooltip>
    </Layout>
  );
};
```


