From 1c1d0c9d251d16d45f605c3212e1a60007e059f6 Mon Sep 17 00:00:00 2001 From: BG-Software <73077398+BG-Software-BG@users.noreply.github.com> Date: Fri, 17 Jan 2025 22:11:28 +0100 Subject: [PATCH] Improve documentation for alerts (#2055) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com> --- .changeset/quiet-melons-live.md | 5 + docs/ui/components/alerts.mdx | 269 ++++++++++++++++++-------------- 2 files changed, 155 insertions(+), 119 deletions(-) create mode 100644 .changeset/quiet-melons-live.md diff --git a/.changeset/quiet-melons-live.md b/.changeset/quiet-melons-live.md new file mode 100644 index 000000000..024afc74e --- /dev/null +++ b/.changeset/quiet-melons-live.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Improve documentation for alerts diff --git a/docs/ui/components/alerts.mdx b/docs/ui/components/alerts.mdx index dd595c8b5..8629ed99c 100644 --- a/docs/ui/components/alerts.mdx +++ b/docs/ui/components/alerts.mdx @@ -9,7 +9,11 @@ description: Alert messages for user notifications. Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action. -```html example vertical columns={2} centered separated +Combine `alert` class with one of the following: `alert-success`, `alert-info`, `alert-warning`, `alert-danger` to get the alert that you need. + +Alert classes affect the color of all the text inside an alert. Use another class, e.g. `text-secondary` to change the color of the alert's content. + +```html example vertical background="surface" columns={2} centered separated height="420px" ``` -```html - -``` - ## Alert links -Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. +Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. Use `alert-link` class to style the link and match the text color. -```html example vertical columns={2} centered -
- This is a danger alert — check it out! -
+```html example vertical background="surface" columns={2} centered height="120px" +
This is a danger alert — check it out!
``` ## Dismissible alerts Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it. -```html example vertical columns={2} centered separated +```html + +``` + +```html example vertical background="surface" columns={2} centered separated height="420px"