# Modal

<!-- STORY -->
## Usage

Modals are used to reveal critical information, show information without losing context, or when the
system requires a user response. Modals can also fragment a complex workflow into simpler steps and
should serve a single purpose dedicated to completing the user’s task.

## VModel

You can use the `v-model` directive to control the modal’s visibility. The `v-model`
directive interfaces with the `visible` property and the `@change` event.

## Deprecation Warning

We are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the
`modal-footer` slot content is populated. This is in order to align this component with the design
system.

The `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and
`action-cancel`. These props allow you to handle how a primary, secondary and cancel button will
behave in the modals footer. The props receive an object as such:

~~~js
{
  text: 'Save Changes',
  attributes: [
    { variant: 'confirm' },
    { disabled: this.someState },
    { class: 'some-class' },
    ...
  ]
}
~~~