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="components-ui-actionablemessage--default-story" />
</Canvas>

## Props

<ArgsTable of={ActionableMessage} />

### One Action

Add actionable message component with one button

<Canvas>
  <Story id="components-ui-actionablemessage--one-action" />
</Canvas>

### Two Actions

Add actionable message component with two buttons

<Canvas>
  <Story id="components-ui-actionablemessage--two-actions" />
</Canvas>

### Left Aligned

Align actionable message component's text to left

<Canvas>
  <Story id="components-ui-actionablemessage--left-aligned" />
</Canvas>

### With Icon

Add tooltip icon to the left of the component

<Canvas>
  <Story id="components-ui-actionablemessage--with-icon" />
</Canvas>