m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code
a499d0f045
metamask-extension/ui/components/ui/actionable-message
History
David Walsh b042858663 Dark Mode: Ensure actionable message button colors are the same color as previously (#14271)
2022-04-07 02:40:45 -07:00
..
__snapshots__
actionable-message.js
actionable-message.stories.js
actionable-message.test.js
index.js
index.scss Dark Mode: Ensure actionable message button colors are the same color as previously (#14271) 2022-04-07 02:40:45 -07:00
README.mdx

README.mdx 

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>