# FloatingActionButton Open State

The FloatingActionButton enables you to control the state of its item popup from your application. The component provides the [`opened`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#opened) prop, and it raises `open` and `close` events when user interaction changes the state.

The component provides the following options for:

* [Configuring the initial state](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/open-state#configuring-the-initial-state)
* [Preventing opening and closing](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/open-state#preventing-opening-and-closing)

## Configuring the Initial State

When you omit the `opened` prop, the popup starts closed and the component manages its state. To open the popup on load, bind `opened` to `true`. Once you bind `opened`, its value determines whether the popup is visible. Changes to the bound value do not emit `open` or `close` events, so update the value from your application or in response to the `open` and `close` events.

The following demo opens the popup on load and lets you open and close it with external buttons.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/open-state/source.txt)

## Preventing Opening and Closing

The [`open`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#onopen) and [`close`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#onclose) events fire when users click the main button, select an item, or move the focus away from the component. The events fire only when the component has items.

While `opened` is bound, the popup changes only when you update the bound value. To prevent the popup from opening or closing, leave the value unchanged in the corresponding event handler.

Some keyboard actions change the component's internal popup state without emitting `open` or `close`. The popup ignores that internal state while `opened` is bound. For more information, see [FloatingActionButton Events](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/events).

The following demo prevents the popup from closing by keeping `opened` set to `true` in the `close` handler.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/open-state/prevent-open-close/source.txt)

## Suggested Links

* [FloatingActionButton Speed Dial](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/speed-dial)
* [FloatingActionButton Events](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/events)
* [API Reference of the FloatingActionButtonProps](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops)