# FlexiAdd

> A button that creates a new widget and hands it to the user to drop into a board.

Source: https://www.flexiboards.dev/docs/components/adder

Framework: Svelte

## FlexiAdd (component)

**Props**

| Name | Type | Description |
| --- | --- | --- |
| `controller` (bindable) | `FlexiAddController \| undefined` | Optional. The controller managing this component's state and behaviour. Bind to it to access the component's imperative API. |
| `onfirstcreate` | `((instance: FlexiAddController) => void) \| undefined` | Optional. Fires when the component's controller is first created. |
| `class` | `(ClassValue \| ((adder: FlexiAddController) => ClassValue))` | Optional. The class names to apply to the adder's button element. Either a class value, or a function deriving one from the adder's state. |
| `children` | `Snippet<[{ adder: FlexiAddController }]>` | Optional. The child content of the adder, containing the contents of the adder button. |
| `addWidget` | `(() => AdderWidgetConfiguration \| null)` | Required. When the user interacts with the adder, this function allows you to specify the configuration of the widget that is created and grabbed. Return null to cancel the add. |

`FlexiAdd` renders a button inside your board. The `addWidget` prop returns the configuration of the widget to create when the button is grabbed, or `null` to add nothing.

```svelte
<script lang="ts">
	import { FlexiAdd, type AdderWidgetConfiguration } from '@flexiboards/svelte';
	import NumberTile from './number-tile.svelte';

	function addWidget(): AdderWidgetConfiguration {
		return {
			widget: {
				component: NumberTile,
				componentProps: { number: Math.floor(Math.random() * 10) },
				draggability: 'full'
			},
			widthPx: 100,
			heightPx: 100
		};
	}
</script>

<FlexiAdd {addWidget} class="rounded-lg border border-dashed p-4">Add a widget</FlexiAdd>
```

## FlexiAddController

You can access the controller via binding to the `controller` prop, using the `onfirstcreate` callback, or from the `children` snippet parameter.

**Properties**

| Name | Type | Description |
| --- | --- | --- |
| `ref` | `HTMLElement \| undefined` | The DOM element bound to this adder. |

## AdderWidgetConfiguration

`AdderWidgetConfiguration` describes the widget that gets created and grabbed, along with the width and height the grabbed widget starts at.

**Properties**

| Name | Type | Description |
| --- | --- | --- |
| `widget` | `FlexiWidgetDefaults<ClassValue> & { id?: string; type?: string; x?: number; y?: number; width?: number; height?: number; metadata?: Record<string, any>; }` | Required. The configuration of the widget that is created and grabbed. |
| `widthPx` | `number \| undefined` | Optional. The initial width of the grabbed widget in pixels. |
| `heightPx` | `number \| undefined` | Optional. The initial height of the grabbed widget in pixels. |

## Accessibility

`FlexiAdd` renders a native `button`, so it is focusable with `Tab`, and `Enter` creates the widget and grabs it for a keyboard drop. The button has no text of its own: put a label, or a visually hidden `span` for icon-only content, inside it. See [Accessibility](https://www.flexiboards.dev/docs/accessibility).