feat: Update <Alert> style (#12422)

mydea · web-flow · commit 81c0f52ad02d · 2025-01-23T16:01:05.000+01:00
diff --git a/develop-docs/frontend/design-tenets.mdx b/develop-docs/frontend/design-tenets.mdx
@@ -49,7 +49,7 @@ Why minimize content refreshes?
 - Less rendering / data fetching for the browser
 - Assists user navigation by preserving sense of state ("where am I?")
 
-<Alert level="error">
+<Alert level="warning">
   Note: while there are a few good examples of this in action in the app, we are actually pretty inconsistent applying this design principle.
 </Alert>
 
diff --git a/docs/contributing/pages/components.mdx b/docs/contributing/pages/components.mdx
@@ -8,20 +8,62 @@ sidebar_order: 40
 
 Render an alert callout.
 
-<Alert title="Important">
-This is an alert
+<Alert title="Watch out!">
+This is an info alert. Use these for information that's critical to know; it's important for users to read, but won't cause a catastrophic problem if they don't read it. These include versions that introduce breaking changes or feature limitations. Use infrequently.
 </Alert>
 
-```markdown {tabTitle:Example}
-<Alert title="Important">
-This is an alert
+<Alert level="warning" title="Important">
+This is a warning alert. Use these for items that MUST be well understood before proceeding. These highlight information that could cause users to make catastrophic errors that break their applications in ways that are very difficult to fix or create liabilities for them, such as information needed to avoid leaking PII. These should be used very rarely.
+</Alert>
+
+<Alert level="success" title="Tip">
+This is a success alert. Use these when.... TODO?
+</Alert>
+
+<Alert>
+This is an alert without title.
+</Alert>
+
+<Alert>
+This is a multi-line alert without title.  Use these for information that's critical to know; it's important for users to read, but won't cause a catastrophic problem if they don't read it. These include versions that introduce breaking changes or feature limitations. Use infrequently.
+</Alert>
+
+<Alert title="List">
+<ul>
+<li>Item 1</li>
+<li>Item 2</li>
+</ul>
+</Alert>
+
+
+```markdown {tabTitle:Info}
+<Alert title="Watch out!">
+This is an info alert.
+</Alert>
+```
+
+```markdown {tabTitle:Warning}
+<Alert level="warning" title="Important">
+This is a warning alert.
+</Alert>
+```
+
+```markdown {tabTitle:Success}
+<Alert level="success" title="Tip">
+This is a success alert.
+</Alert>
+```
+
+```markdown {tabTitle:No Title}
+<Alert>
+This is an alert without title.
 </Alert>
 ```
 
 Attributes:
 
 - `title` (string) - optional
-- `level` (string: `'info' | 'warning') - optional, defaults to `'info'`
+- `level` (string: `'info' | 'warning' | 'success') - optional, defaults to `'info'`
 
 Use this for these types of content:
 
@@ -30,7 +72,7 @@ Use this for these types of content:
 - **Warning:** Use these for items that MUST be well understood before proceeding. These highlight information that could cause users to make catastrophic errors that break their applications in ways that are very difficult to fix or create liabilities for them, such as information needed to avoid leaking PII. These should be used very rarely.
   - Use with the title "Important"; do not use the title "Warning"
 
-An Alert component with no level setting will render as a Note component.
+You can also omit the title of the alert.
 
 See also the [Note component](#note).
 
diff --git a/docs/platforms/android/enriching-events/breadcrumbs/index.mdx b/docs/platforms/android/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/apple/common/enriching-events/breadcrumbs/index.mdx b/docs/platforms/apple/common/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/dart/enriching-events/breadcrumbs/index.mdx b/docs/platforms/dart/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/dotnet/common/enriching-events/breadcrumbs/index.mdx b/docs/platforms/dotnet/common/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/dotnet/guides/nlog/configuration/advanced-configuration-example.mdx b/docs/platforms/dotnet/guides/nlog/configuration/advanced-configuration-example.mdx
@@ -4,7 +4,7 @@ sidebar_order: 20
 description: "Review an advanced example of configuration for NLog."
 ---
 
-<Alert level="" title="NLog Layouts">
+<Alert title="NLog Layouts">
 
 For more information on how to dynamically set event data via `NLog.config`, see NLog's [layout renderer documentation](https://nlog-project.org/config/?tab=layout-renderers).
 
diff --git a/docs/platforms/dotnet/guides/nlog/index.mdx b/docs/platforms/dotnet/guides/nlog/index.mdx
@@ -41,7 +41,7 @@ Messages logged from assemblies with the name starting with `Sentry` will not ge
 
 ## Configure
 
-<Alert level="" title="NLog Layouts">
+<Alert title="NLog Layouts">
 
 For more information on how to dynamically set event data via `NLog.config`, see NLog's [layout renderer documentation](https://nlog-project.org/config/?tab=layout-renderers).
 
diff --git a/docs/platforms/elixir/enriching-events/breadcrumbs/index.mdx b/docs/platforms/elixir/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/flutter/enriching-events/breadcrumbs/index.mdx b/docs/platforms/flutter/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/go/common/enriching-events/breadcrumbs/index.mdx b/docs/platforms/go/common/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/java/common/enriching-events/breadcrumbs/index.mdx b/docs/platforms/java/common/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/javascript/common/enriching-events/breadcrumbs/index.mdx b/docs/platforms/javascript/common/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/javascript/common/user-feedback/index.mdx b/docs/platforms/javascript/common/user-feedback/index.mdx
@@ -35,7 +35,7 @@ By default, this will insert the widget into the bottom right corner of your web
 
 On SDK version 8.0.0 and above, users can send screenshots with their feedback. If you're self-hosting, you also need release 24.4.2 and above. You can configure this using the `enableScreenshot` option, by default it is set to `true`. Screenshots aren't supported on mobile devices, so the screenshot button will be hidden automatically in this case.
 
-<Alert level="">
+<Alert>
   Screenshots use your [attachments
   quota](/pricing/quotas/manage-attachments-quota). All plans come with 1GB of
   attachments, which is approxiamately 2500 screenshots.
diff --git a/docs/platforms/kotlin/guides/kotlin-multiplatform/enriching-events/breadcrumbs/index.mdx b/docs/platforms/kotlin/guides/kotlin-multiplatform/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/native/common/enriching-events/breadcrumbs/index.mdx b/docs/platforms/native/common/enriching-events/breadcrumbs/index.mdx
@@ -12,7 +12,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/native/guides/minidumps/index.mdx b/docs/platforms/native/guides/minidumps/index.mdx
@@ -34,7 +34,7 @@ and can later be uploaded to Sentry. A minidump typically includes:
   assertion message is also included in the dump.
 - Meta data about the CPU architecture and the user’s operating system.
 
-<Alert level="" title="A Word on Data Privacy">
+<Alert title="A Word on Data Privacy">
 
 Minidumps are memory dumps of the process at the moment it crashes. As such,
 they might contain sensitive information on the target system, such as
diff --git a/docs/platforms/php/common/enriching-events/breadcrumbs/index.mdx b/docs/platforms/php/common/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/powershell/enriching-events/breadcrumbs/index.mdx b/docs/platforms/powershell/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/python/enriching-events/breadcrumbs/index.mdx b/docs/platforms/python/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/python/legacy-sdk/integrations.mdx b/docs/platforms/python/legacy-sdk/integrations.mdx
@@ -875,7 +875,7 @@ logger.error('There was an error, with a stack trace!', extra={
 })
 ```
 
-<Alert level="" title="Note on Python version">
+<Alert title="Note on Python version">
 
 Depending on the version of Python you’re using, `extra` might not be an acceptable keyword argument for a logger’s `.exception()` method (`.debug()`, `.info()`, `.warning()`, `.error()` and `.critical()` should work fine regardless of Python version). This should be fixed as of Python 2.7.4 and 3.2. Official issue here: [bugs.python.org/issue15541](https://bugs.python.org/issue15541).
 
@@ -1200,7 +1200,7 @@ class AsyncExceptionHandler(SentryMixin, tornado.web.RequestHandler):
         self.finish()
 ```
 
-<Alert level="" title="Tip">
+<Alert title="Tip">
 
 The value returned by the yield is a `HTTPResponse` object.
 
diff --git a/docs/platforms/react-native/enriching-events/breadcrumbs/index.mdx b/docs/platforms/react-native/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/ruby/common/enriching-events/breadcrumbs/index.mdx b/docs/platforms/ruby/common/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/rust/common/enriching-events/breadcrumbs/index.mdx b/docs/platforms/rust/common/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/docs/platforms/unity/enriching-events/breadcrumbs/index.mdx b/docs/platforms/unity/enriching-events/breadcrumbs/index.mdx
@@ -7,7 +7,7 @@ Sentry uses _breadcrumbs_ to create a trail of events that happened prior to an
 
 This page provides an overview of manual breadcrumb recording and customization. Learn more about the information that displays on the **Issue Details** page and how you can filter breadcrumbs to quickly resolve issues in [Using Breadcrumbs](/product/error-monitoring/breadcrumbs).
 
-<Alert level="" title="Learn about SDK usage">
+<Alert title="Learn about SDK usage">
 
 Developers who want to modify the breadcrumbs interface can learn more in our [developer documentation about the Breadcrumbs Interface](https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/).
 
diff --git a/platform-includes/configuration/config-intro/dotnet.nlog.mdx b/platform-includes/configuration/config-intro/dotnet.nlog.mdx
@@ -1,4 +1,4 @@
-<Alert level="" title="NLog Layouts">
+<Alert title="NLog Layouts">
 
 For more information on how to dynamically set event data via `NLog.config`, see NLog's [layout renderer documentation](https://nlog-project.org/config/?tab=layout-renderers).
 
diff --git a/platform-includes/debug-symbols-apple/_default.mdx b/platform-includes/debug-symbols-apple/_default.mdx
diff --git a/platform-includes/enriching-events/set-tag/dotnet.nlog.mdx b/platform-includes/enriching-events/set-tag/dotnet.nlog.mdx
diff --git a/platform-includes/enriching-events/set-user/dotnet.nlog.mdx b/platform-includes/enriching-events/set-user/dotnet.nlog.mdx
diff --git a/platform-includes/set-environment/dotnet.nlog.mdx b/platform-includes/set-environment/dotnet.nlog.mdx
diff --git a/platform-includes/set-release/dotnet.nlog.mdx b/platform-includes/set-release/dotnet.nlog.mdx
diff --git a/src/components/alert/index.tsx b/src/components/alert/index.tsx
diff --git a/src/components/alert/styles.scss b/src/components/alert/styles.scss
