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"