From 4214598fce39f8859775eeefa7846733a6c756b0 Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Mon, 12 Feb 2024 11:44:22 -0600
Subject: [PATCH] feat: callout, closes #4311

---
 src/app/components/error-label.tsx            |  1 +
 .../fees-row/components/fees-row.layout.tsx   |  8 ++-
 src/app/components/info-label.tsx             | 28 ---------
 src/app/components/warning-label.tsx          | 32 ----------
 .../requesting-tab-closed-error-msg.tsx       |  6 +-
 .../components/ledger-inline-warnings.tsx     | 14 ++---
 .../connect-ledger-error.layout.tsx           | 15 ++---
 .../connect-device/connect-ledger-error.tsx   |  4 +-
 .../psbt-request-sighash-warning-label.tsx    |  6 +-
 ...trieve-taproot-to-native-segwit.layout.tsx |  6 +-
 .../post-condition-mode-warning.tsx           |  6 +-
 ...bitcoin-contract-request-warning-label.tsx | 11 ++--
 .../components/testnet-btc-message.tsx        | 15 -----
 .../form/brc-20/brc20-send-form.tsx           |  6 +-
 .../form/btc/btc-send-form.tsx                | 14 +++--
 .../form/send-form-confirmation.tsx           |  6 +-
 .../send/sent-summary/brc20-sent-summary.tsx  |  7 +--
 .../ui/components/callout/callout.stories.tsx | 53 ++++++++++++++++
 src/app/ui/components/callout/callout.tsx     | 61 +++++++++++++++++++
 .../ui/components/callout/callout.utils.tsx   | 16 +++++
 20 files changed, 186 insertions(+), 129 deletions(-)
 delete mode 100644 src/app/components/info-label.tsx
 delete mode 100644 src/app/components/warning-label.tsx
 delete mode 100644 src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx
 create mode 100644 src/app/ui/components/callout/callout.stories.tsx
 create mode 100644 src/app/ui/components/callout/callout.tsx
 create mode 100644 src/app/ui/components/callout/callout.utils.tsx

diff --git a/src/app/components/error-label.tsx b/src/app/components/error-label.tsx
index 8fbd86607f7..00a6537d05f 100644
--- a/src/app/components/error-label.tsx
+++ b/src/app/components/error-label.tsx
@@ -8,6 +8,7 @@ export function ErrorLabel({ children, ...rest }: FlagProps) {
       spacing="space.02"
       color="red.action-primary-default"
       textStyle="body.02"
+      textAlign="left"
       {...rest}
     >
       {children}
diff --git a/src/app/components/fees-row/components/fees-row.layout.tsx b/src/app/components/fees-row/components/fees-row.layout.tsx
index cacf4d43019..48524ed7e17 100644
--- a/src/app/components/fees-row/components/fees-row.layout.tsx
+++ b/src/app/components/fees-row/components/fees-row.layout.tsx
@@ -3,7 +3,7 @@ import { HStack, HstackProps, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { SponsoredLabel } from '@app/components/sponsored-label';
-import { WarningLabel } from '@app/components/warning-label';
+import { Callout } from '@app/ui/components/callout/callout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 import { InfoCircleIcon } from '@app/ui/icons/info-circle-icon';
 
@@ -42,7 +42,11 @@ export function FeesRowLayout(props: FeesRowLayoutProps) {
         {feeField}
       </HStack>
       {isSponsored && <SponsoredLabel />}
-      {!meta.error && fieldWarning && <WarningLabel width="100%">{fieldWarning}</WarningLabel>}
+      {!meta.error && fieldWarning && (
+        <Callout variant="warning" width="100%">
+          {fieldWarning}
+        </Callout>
+      )}
     </HStack>
   );
 }
diff --git a/src/app/components/info-label.tsx b/src/app/components/info-label.tsx
deleted file mode 100644
index 42ae1a6b2ea..00000000000
--- a/src/app/components/info-label.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ReactNode } from 'react';
-
-import { Flex, FlexProps, Stack, styled } from 'leather-styles/jsx';
-
-interface InfoLabelProps extends FlexProps {
-  children: ReactNode;
-  title: string;
-}
-export function InfoLabel({ children, title, ...rest }: InfoLabelProps) {
-  return (
-    <Flex width="100%" {...rest}>
-      <Stack
-        alignItems="start"
-        bg="disabled"
-        borderRadius="sm"
-        minHeight="48px"
-        px="space.04"
-        py="space.03"
-        gap="space.02"
-        width="100%"
-        color="ink.text-primary"
-      >
-        <styled.span textStyle="label.02">{title}</styled.span>
-        <styled.span textStyle="label.03">{children}</styled.span>
-      </Stack>
-    </Flex>
-  );
-}
diff --git a/src/app/components/warning-label.tsx b/src/app/components/warning-label.tsx
deleted file mode 100644
index 4f9752c07fa..00000000000
--- a/src/app/components/warning-label.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Box, BoxProps, styled } from 'leather-styles/jsx';
-
-import { Flag } from '@app/ui/components/flag/flag';
-import { ErrorCircleIcon } from '@app/ui/icons/error-circle-icon';
-
-interface WarningLabelProps extends BoxProps {
-  title?: string;
-}
-export function WarningLabel({ children, title, ...props }: WarningLabelProps) {
-  return (
-    <Box bg="yellow.background-primary" borderRadius="sm" {...props}>
-      <Flag
-        align="top"
-        color="ink.notification-text"
-        img={<ErrorCircleIcon color="yellow.action-primary-default" />}
-        minHeight="48px"
-        px="space.04"
-        py="space.03"
-        width="100%"
-      >
-        {title && (
-          <styled.h1 mb="space.01" mt={0} textStyle="label.02">
-            {title}
-          </styled.h1>
-        )}
-        <styled.span mb="space.01" textStyle="caption.02">
-          {children}
-        </styled.span>
-      </Flag>
-    </Box>
-  );
-}
diff --git a/src/app/features/errors/requesting-tab-closed-error-msg.tsx b/src/app/features/errors/requesting-tab-closed-error-msg.tsx
index 75dca4c32d3..94683a542ac 100644
--- a/src/app/features/errors/requesting-tab-closed-error-msg.tsx
+++ b/src/app/features/errors/requesting-tab-closed-error-msg.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-import { WarningLabel } from '@app/components/warning-label';
 import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';
+import { Callout } from '@app/ui/components/callout/callout';
 
 export function RequestingTabClosedWarningMessage() {
   const [hasTabClosed, setHasTabClosed] = useState(false);
@@ -14,8 +14,8 @@ export function RequestingTabClosedWarningMessage() {
   if (!hasTabClosed) return null;
 
   return (
-    <WarningLabel mb="space.05" title="Requesting window closed" width="100%">
+    <Callout variant="warning" mb="space.05" title="Requesting window closed" width="100%">
       The window making this request closed, but you can still broadcast the transaction
-    </WarningLabel>
+    </Callout>
   );
 }
diff --git a/src/app/features/ledger/components/ledger-inline-warnings.tsx b/src/app/features/ledger/components/ledger-inline-warnings.tsx
index 26716404138..a728d6629bb 100644
--- a/src/app/features/ledger/components/ledger-inline-warnings.tsx
+++ b/src/app/features/ledger/components/ledger-inline-warnings.tsx
@@ -2,7 +2,7 @@ import { styled } from 'leather-styles/jsx';
 
 import { SupportedBlockchains } from '@shared/constants';
 
-import { WarningLabel } from '@app/components/warning-label';
+import { Callout } from '@app/ui/components/callout/callout';
 import { Capitalize } from '@app/ui/utils/capitalize';
 
 import { LatestDeviceResponse } from '../utils/generic-ledger-utils';
@@ -19,30 +19,30 @@ interface CommonLedgerInlineWarningsProps extends RequiresChainProp {
 
 function OutdatedLedgerAppWarning({ chain }: RequiresChainProp) {
   return (
-    <WarningLabel textAlign="left">
+    <Callout variant="warning" textAlign="left">
       Latest version of <Capitalize>{chain} app</Capitalize> required
       <styled.a href="ledgerlive://manager" textDecoration="underline">
         Update on Ledger Live to continue
       </styled.a>
-    </WarningLabel>
+    </Callout>
   );
 }
 
 function LedgerDeviceLockedWarning({ chain }: RequiresChainProp) {
   return (
-    <WarningLabel textAlign="left">
+    <Callout variant="warning" textAlign="left">
       Your Ledger is locked. Unlock it and open the {''}
       <Capitalize>{chain}</Capitalize>
       {''} app to continue.
-    </WarningLabel>
+    </Callout>
   );
 }
 
 function LedgerAppClosedWarning({ chain }: RequiresChainProp) {
   return (
-    <WarningLabel textAlign="left">
+    <Callout variant="warning" textAlign="left">
       The <Capitalize>{chain}</Capitalize> app appears to be closed on Ledger. Open it to continue.
-    </WarningLabel>
+    </Callout>
   );
 }
 
diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx
index a98b2805cb7..870f03076bb 100644
--- a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx
+++ b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx
@@ -1,9 +1,8 @@
 import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
-import { ErrorLabel } from '@app/components/error-label';
-import { WarningLabel } from '@app/components/warning-label';
 import { ConnectLedgerErr } from '@app/features/ledger/illustrations/ledger-illu-connect-ledger-error';
 import { Button } from '@app/ui/components/button/button';
+import { Callout } from '@app/ui/components/callout/callout';
 import { Link } from '@app/ui/components/link/link';
 import { CircleIcon } from '@app/ui/icons/circle-icon';
 
@@ -40,13 +39,11 @@ export function ConnectLedgerErrorLayout(props: ConnectLedgerErrorLayoutProps) {
         <ConnectLedgerErr />
       </Box>
       <LedgerTitle mt="space.07">We're unable to connect to your Ledger device</LedgerTitle>
-      {warningText ? (
-        <WarningLabel mt="space.04" px="space.06" fontSize="14px">
-          {warningText}
-        </WarningLabel>
-      ) : (
-        <ErrorLabel mt="space.02">Unable to connect</ErrorLabel>
-      )}
+
+      <Callout variant={warningText ? 'warning' : 'error'} mt="space.04">
+        {warningText ? warningText : 'Unable to connect'}
+      </Callout>
+
       <Stack borderRadius="md" gap="space.01" textAlign="left" py="space.05">
         <PossibleReasonUnableToConnect text="Check if Ledger Live is open. Close it and try again" />
         <PossibleReasonUnableToConnect text="Ensure you only have one instance of Leather open" />
diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.tsx
index 60f98360e79..d9e4849ecb1 100644
--- a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.tsx
+++ b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.tsx
@@ -11,8 +11,8 @@ export function ConnectLedgerError() {
   const latestLedgerError = useLatestLedgerError();
   const ledgerNavigate = useLedgerNavigate();
   const chain = useLocationState<SupportedBlockchains>('chain');
-  // TODO: here it would be better to use
-  // the actual app name from LEDGER_APPS_MAP at src/app/features/ledger/utils/generic-ledger-utils.ts
+  // TODO: here it would be better to use the actual app name from
+  // LEDGER_APPS_MAP at src/app/features/ledger/utils/generic-ledger-utils.ts
 
   const appName = capitalize(chain);
   return (
diff --git a/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx b/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx
index 9eb16180a6a..1ff560f6ed9 100644
--- a/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx
@@ -1,13 +1,13 @@
-import { WarningLabel } from '@app/components/warning-label';
+import { Callout } from '@app/ui/components/callout/callout';
 
 interface PsbtRequestSighashWarningLabelProps {
   origin: string;
 }
 export function PsbtRequestSighashWarningLabel({ origin }: PsbtRequestSighashWarningLabelProps) {
   return (
-    <WarningLabel title="Be careful with this transaction" width="100%">
+    <Callout variant="warning" title="Be careful with this transaction">
       The details of this transaction are not guaranteed and could be modified later. Continue only
       if you trust {origin}
-    </WarningLabel>
+    </Callout>
   );
 }
diff --git a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
index ede7bd817c5..cbc08026ac3 100644
--- a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
+++ b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
@@ -1,9 +1,9 @@
 import { Flex, styled } from 'leather-styles/jsx';
 
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
-import { WarningLabel } from '@app/components/warning-label';
 import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
 import { Button } from '@app/ui/components/button/button';
+import { Callout } from '@app/ui/components/callout/callout';
 
 interface RetrieveTaprootToNativeSegwitLayoutProps {
   isBroadcasting: boolean;
@@ -34,11 +34,11 @@ export function RetrieveTaprootToNativeSegwitLayout(
           This transaction may take upwards of 30 minutes to confirm.
         </styled.span>
         {children}
-        <WarningLabel mt="space.05">
+        <Callout variant="warning" mt="space.05">
           We recommend you check the URL for each "Uninscribed UTXO" listed above to ensure it
           displays no inscription. If it does display one, do not proceed with retrieval or you may
           lose it!
-        </WarningLabel>
+        </Callout>
         <Button
           onClick={onApproveTransaction}
           aria-busy={isBroadcasting}
diff --git a/src/app/features/stacks-transaction-request/post-condition-mode-warning.tsx b/src/app/features/stacks-transaction-request/post-condition-mode-warning.tsx
index 10346530107..9d1277b33a6 100644
--- a/src/app/features/stacks-transaction-request/post-condition-mode-warning.tsx
+++ b/src/app/features/stacks-transaction-request/post-condition-mode-warning.tsx
@@ -1,7 +1,7 @@
 import { PostConditionMode } from '@stacks/transactions';
 
-import { WarningLabel } from '@app/components/warning-label';
 import { usePostConditionModeState } from '@app/store/transactions/post-conditions.hooks';
+import { Callout } from '@app/ui/components/callout/callout';
 
 export function PostConditionModeWarning(): React.JSX.Element | null {
   const mode = usePostConditionModeState();
@@ -9,9 +9,9 @@ export function PostConditionModeWarning(): React.JSX.Element | null {
   if (mode !== PostConditionMode.Allow) return null;
 
   return (
-    <WarningLabel mb="space.05" title="This transaction is not secure" width="100%">
+    <Callout variant="warning" mb="space.05" title="This transaction is not secure">
       If you confirm, you allow it to transfer any of your tokens. Only confirm if you trust and
       have verified the contract.
-    </WarningLabel>
+    </Callout>
   );
 }
diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-warning-label.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-warning-label.tsx
index 983c910daea..a81de6200c7 100644
--- a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-warning-label.tsx
+++ b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-warning-label.tsx
@@ -1,19 +1,18 @@
 import { BitcoinContractRequestSelectors } from '@tests/selectors/bitcoin-contract-request.selectors';
 
-import { WarningLabel } from '@app/components/warning-label';
+import { Callout } from '@app/ui/components/callout/callout';
 
 export function BitcoinContractRequestWarningLabel(props: { appName?: string }) {
   const { appName } = props;
-  const title = `Do not proceed unless you trust ${appName ?? 'Unknown'}!`;
 
   return (
-    <WarningLabel
-      title={title}
-      width="100%"
+    <Callout
       data-testid={BitcoinContractRequestSelectors.BitcoinContractWarningLabel}
+      variant="warning"
+      title={`Do not proceed unless you trust ${appName ?? 'Unknown'}!`}
     >
       By signing the contract YOU AGREE TO LOCK YOUR BITCOIN with {appName} into a contract where it
       will remain until a triggering event will release it.
-    </WarningLabel>
+    </Callout>
   );
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx
deleted file mode 100644
index 58d6a97f782..00000000000
--- a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { WarningLabel } from '@app/components/warning-label';
-import { Link } from '@app/ui/components/link/link';
-
-/**
- * @deprecated
- * To be replaced with design system `Callout` component when ready
- */
-export function TestnetBtcMessage() {
-  return (
-    <WarningLabel mb="space.04">
-      This is a Bitcoin testnet transaction. Funds have no value.{' '}
-      <Link href="https://coinfaucet.eu/en/btc-testnet">Get testnet BTC here ↗</Link>
-    </WarningLabel>
-  );
-}
diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx
index dbde4795c25..2888ad1a735 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx
@@ -5,8 +5,8 @@ import { Box, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { InfoLabel } from '@app/components/info-label';
 import { Brc20TokenIcon } from '@app/ui/components/avatar-icon/brc20-token-icon';
+import { Callout } from '@app/ui/components/callout/callout';
 import { Link } from '@app/ui/components/link/link';
 
 import { AmountField } from '../../components/amount-field';
@@ -62,7 +62,7 @@ export function Brc20SendForm() {
                   autoComplete="off"
                 />
                 <SelectedAssetField icon={<Brc20TokenIcon />} name={tick} symbol={tick} />
-                <InfoLabel title="Sending BRC-20 tokens requires two steps">
+                <Callout variant="info" title="Sending BRC-20 tokens requires two steps">
                   <styled.ol mb="space.02">
                     <li>1. Create transfer inscription with amount to send</li>
                     <li>2. Send transfer inscription to recipient of choice</li>
@@ -77,7 +77,7 @@ export function Brc20SendForm() {
                   >
                     Learn more
                   </Link>
-                </InfoLabel>
+                </Callout>
               </SendCryptoAssetFormLayout>
 
               <FormFooter
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
index a5d500b6fc9..6e1987c2681 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
@@ -12,6 +12,8 @@ import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-se
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
+import { Callout } from '@app/ui/components/callout/callout';
+import { Link } from '@app/ui/components/link/link';
 
 import { AmountField } from '../../components/amount-field';
 import { FormFooter } from '../../components/form-footer';
@@ -20,7 +22,6 @@ import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-fo
 import { SendFiatValue } from '../../components/send-fiat-value';
 import { BitcoinRecipientField } from '../../family/bitcoin/components/bitcoin-recipient-field';
 import { BitcoinSendMaxButton } from '../../family/bitcoin/components/bitcoin-send-max-button';
-import { TestnetBtcMessage } from '../../family/bitcoin/components/testnet-btc-message';
 import { useSendFormRouteState } from '../../hooks/use-send-form-route-state';
 import { createDefaultInitialFormValues, defaultSendFormFormikProps } from '../../send-form.utils';
 import { useBtcSendForm } from './use-btc-send-form';
@@ -89,13 +90,14 @@ export function BtcSendForm() {
                   name={btcBalance.asset.name}
                   symbol={symbol}
                 />
-
                 <BitcoinRecipientField />
-
                 {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && (
-                  <Box mt="space.04">
-                    <TestnetBtcMessage />
-                  </Box>
+                  <Callout variant="warning" mt="space.04">
+                    {'This is a Bitcoin testnet transaction. Funds have no value. '}
+                    <Link href="https://coinfaucet.eu/en/btc-testnet" textStyle="caption.02">
+                      Get testnet BTC here ↗
+                    </Link>
+                  </Callout>
                 )}
               </SendCryptoAssetFormLayout>
               <FormFooter balance={btcBalance.balance} />
diff --git a/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx
index 0188e324015..3c905dcd75b 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx
@@ -10,8 +10,8 @@ import {
   InfoCardRow,
   InfoCardSeparator,
 } from '@app/components/info-card/info-card';
-import { InfoLabel } from '@app/components/info-label';
 import { Button } from '@app/ui/components/button/button';
+import { Callout } from '@app/ui/components/callout/callout';
 
 interface SendFormConfirmationProps {
   recipient: string;
@@ -64,9 +64,9 @@ export function SendFormConfirmation({
         value={Number(txValue)}
       />
 
-      <InfoLabel px="space.05" mb="space.05" title="Sending to an exchange?">
+      <Callout variant="info" title="Sending to an exchange?" px="space.03" mb="space.05">
         {`Make sure you include the memo so the exchange can credit the ${symbol} to your account`}
-      </InfoLabel>
+      </Callout>
 
       <Stack pb="space.06" px="space.06" width="100%">
         <InfoCardRow
diff --git a/src/app/pages/send/sent-summary/brc20-sent-summary.tsx b/src/app/pages/send/sent-summary/brc20-sent-summary.tsx
index 2ca846c77eb..94ede1baf4c 100644
--- a/src/app/pages/send/sent-summary/brc20-sent-summary.tsx
+++ b/src/app/pages/send/sent-summary/brc20-sent-summary.tsx
@@ -17,8 +17,8 @@ import {
   InfoCardRow,
   InfoCardSeparator,
 } from '@app/components/info-card/info-card';
-import { InfoLabel } from '@app/components/info-label';
 import { ModalHeader } from '@app/components/modal-header';
+import { Callout } from '@app/ui/components/callout/callout';
 import { Link } from '@app/ui/components/link/link';
 import { ExternalLinkIcon } from '@app/ui/icons/external-link-icon';
 
@@ -56,12 +56,11 @@ export function Brc20SentSummary() {
       <InfoCardAssetValue px="space.05" symbol={tick} value={Number(amount)} />
 
       <Stack px="space.06" pb="space.06" width="100%">
-        <InfoLabel mb="space.05" title="One more step is required to send tokens">
+        <Callout variant="info" title="One more step is required to send tokens" mb="space.05">
           <styled.span mb="space.02">
             You'll need to send the transfer inscription to your recipient of choice from the home
             screen once its status changes to "Ready to send"
           </styled.span>
-
           <Link
             textStyle="body.02"
             onClick={() => {
@@ -70,7 +69,7 @@ export function Brc20SentSummary() {
           >
             Learn more
           </Link>
-        </InfoLabel>
+        </Callout>
         <InfoCardSeparator />
 
         <InfoCardRow title="Sending" value={amountFormatted} />
diff --git a/src/app/ui/components/callout/callout.stories.tsx b/src/app/ui/components/callout/callout.stories.tsx
new file mode 100644
index 00000000000..47928f25097
--- /dev/null
+++ b/src/app/ui/components/callout/callout.stories.tsx
@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Callout as Component } from './callout';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Callout',
+  args: {
+    variant: 'default',
+  },
+  parameters: {
+    controls: { include: ['variant'] },
+  },
+  render: args => <Component {...args} width="500px" />,
+};
+
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const Callout: Story = {
+  args: {
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
+    title: 'Title',
+  },
+};
+
+export const WithOnlyTitle: Story = {
+  args: {
+    title: 'Title',
+  },
+};
+
+export const WithLongTitle: Story = {
+  args: {
+    title:
+      'This is testing a really long title to see how it will look with no caption and two lines for the title',
+  },
+};
+
+export const WithOnlyCaption: Story = {
+  args: {
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
+  },
+};
+
+export const WithShortCaption: Story = {
+  args: {
+    children: 'Short caption with no title.',
+  },
+};
diff --git a/src/app/ui/components/callout/callout.tsx b/src/app/ui/components/callout/callout.tsx
new file mode 100644
index 00000000000..553c650fc1b
--- /dev/null
+++ b/src/app/ui/components/callout/callout.tsx
@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+
+import { css } from 'leather-styles/css';
+import { Box, type BoxProps, Stack, styled } from 'leather-styles/jsx';
+
+import { Flag } from '../flag/flag';
+import { getIconVariant } from './callout.utils';
+
+type CalloutVariant = 'default' | 'error' | 'info' | 'success' | 'warning';
+
+const calloutStyles = css({
+  color: 'ink.text-primary',
+  textAlign: 'left',
+  width: '100%',
+
+  '&[data-variant="default"]': {
+    backgroundColor: 'ink.non-interactive',
+  },
+  '&[data-variant="error"]': {
+    backgroundColor: 'red.background-secondary',
+  },
+  '&[data-variant="info"]': {
+    backgroundColor: 'blue.background-secondary',
+  },
+  '&[data-variant="success"]': {
+    backgroundColor: 'green.background-secondary',
+  },
+  '&[data-variant="warning"]': {
+    backgroundColor: 'yellow.background-secondary',
+  },
+});
+
+interface CalloutProps extends BoxProps {
+  icon?: ReactNode;
+  title?: string;
+  variant?: CalloutVariant;
+}
+export function Callout(props: CalloutProps) {
+  const { children, icon, title, variant = 'default', ...rest } = props;
+  return (
+    <Box className={calloutStyles} data-variant={variant} {...rest}>
+      <Flag
+        align="top"
+        img={icon ? icon : getIconVariant(variant)}
+        p="space.05"
+        reverse
+        spacing="space.03"
+        width="100%"
+      >
+        <Stack>
+          {title && (
+            <styled.span fontWeight={500} lineHeight="24px" textStyle="label.02">
+              {title}
+            </styled.span>
+          )}
+          {children && <styled.span textStyle="caption.02">{children}</styled.span>}
+        </Stack>
+      </Flag>
+    </Box>
+  );
+}
diff --git a/src/app/ui/components/callout/callout.utils.tsx b/src/app/ui/components/callout/callout.utils.tsx
new file mode 100644
index 00000000000..cb61f90d358
--- /dev/null
+++ b/src/app/ui/components/callout/callout.utils.tsx
@@ -0,0 +1,16 @@
+import { CheckmarkCircleIcon, ErrorCircleIcon, ErrorIcon, InfoCircleIcon } from '@app/ui/icons';
+
+export function getIconVariant(variant?: string) {
+  switch (variant) {
+    case 'error':
+      return <ErrorIcon />;
+    case 'success':
+      return <CheckmarkCircleIcon />;
+    case 'warning':
+      return <ErrorCircleIcon />;
+    case 'info':
+      return <InfoCircleIcon />;
+    default:
+      return undefined;
+  }
+}