@atlaskit/inline-dialog

Inline Dialog

The Inline Dialog is a container for secondary content and controls that are displayed on user request.

Try it out

Interact with a live demo of the @atlaskit/inline-dialog component.

Installation

npm install @atlaskit/inline-dialog

Using the component

ak-inline-dialog is a React component that can wrap content and then toggle the display of an aligned dialog box.

Example usage:

import React, { PropTypes, PureComponent } from 'react';
import AKInlineDialog from '@atlaskit/inline-dialog';

class ButtonActivatedDialog extends PureComponent {
  static propTypes = {
    content: PropTypes.node,
    position: PropTypes.string,
  }

  state = {
    isOpen: false,
  };

  handleClick = () => {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }

  render = () => (
    <AKInlineDialog
      content={this.props.content}
      position={this.props.position}
      isOpen={this.state.isOpen}
    >
      <button onClick={this.handleClick} />
    </AKInlineDialog>
  )
}

This would allow you to use the ButtonActivatedDialog class to render something similar to the example gif above.

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!