metamask-extension/ui/components/ui/actionable-message

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import ActionableMessage from '.';

# Actionable Message

Popup component that give the user information. Actionable Message component can generate a tooltip and a maximum of two action buttons.

<Canvas>
  <Story id="ui-components-ui-actionable-message-actionable-message-stories-js--default-story" />
</Canvas>

## Component API

<ArgsTable of={ActionableMessage} />

### One Action

Add actionable message component with one button

<Canvas>
  <Story id="ui-components-ui-actionable-message-actionable-message-stories-js--one-action" />
</Canvas>

### Two Actions

Add actionable message component with two buttons

<Canvas>
  <Story id="ui-components-ui-actionable-message-actionable-message-stories-js--two-actions" />
</Canvas>

### Left Aligned

Align actionable message component's text to left

<Canvas>
  <Story id="ui-components-ui-actionable-message-actionable-message-stories-js--left-aligned" />
</Canvas>

### With Icon

Add tooltip icon to the left of the component

<Canvas>
  <Story id="ui-components-ui-actionable-message-actionable-message-stories-js--with-icon" />
</Canvas>