IgniteUI · Zneeky · May 13, 2026 · May 20, 2026
diff --git a/docs/angular/src/content/en/components/accordion.mdx b/docs/angular/src/content/en/components/accordion.mdx
@@ -170,7 +170,7 @@ The following snippet demonstrates passing the animation settings to the compone
 </igx-accordion>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 If you would like to turn off the animation for the <ApiLink type="Accordion" /> the `animationSettings` could be set to `null`.
 </DocsAside>
 
@@ -199,7 +199,7 @@ Alternatively, you have the ability to set every single <ApiLink type="Expansion
 
 Using the <ApiLink type="Accordion" member="collapseAll" label="collapseAll" /> and <ApiLink type="Accordion" member="expandAll" label="expandAll" /> methods you can respectively collapse and expand all <ApiLink type="ExpansionPanel" /> of the <ApiLink type="Accordion" /> programmatically.
 
-<DocsAside type="note">
+<DocsAside type="info">
 If <ApiLink type="Accordion" member="singleBranchExpand" label="singleBranchExpand" /> property is set to _true_ calling <ApiLink type="Accordion" member="expandAll" label="expandAll" /> method would expand only the last <ApiLink type="ExpansionPanel" label="panel" />.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx
@@ -129,7 +129,7 @@ The same Action Strip instance can be used in multiple places in the document as
 The Action Strip can change its parent container, which is possible by changing the <ApiLink type="ActionStrip" member="context" label="context" />.
 The best way to do so is via the <ApiLink type="ActionStrip" member="show" label="show" /> API method and passing the `context` as an argument. The `context` should be an instance of a component and should have an accessible `element` property of the `ElementRef` type.
 
-<DocsAside type="note">
+<DocsAside type="info">
 The `show` API method uses [Angular Renderer2](https://angular.io/api/core/Renderer2) to append the Action Strip to that `element`.
 </DocsAside>
 
@@ -152,7 +152,7 @@ This can be utilized via grid action components and we are providing two default
 </igx-grid>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 These components inherit <ApiLink type="GridActionsBaseDirective" suffix={false} /> and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`.
 </DocsAside>
 <DocsAside type="note">
@@ -161,7 +161,7 @@ When `IgxActionStripComponent` is a child component of the grid, hovering a row
 
 <Sample src="/grid/grid-action-strip" height={600} alt="" />
 
-<DocsAside type="note">
+<DocsAside type="info">
 More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](/components/grid/row-actions.html).
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/ai/theming-mcp.mdx b/docs/angular/src/content/en/components/ai/theming-mcp.mdx
@@ -56,7 +56,7 @@ The canonical launch command is:
 npx -y igniteui-theming igniteui-theming-mcp
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention.
 </DocsAside>
 
@@ -85,7 +85,7 @@ GitHub Copilot in VS Code supports MCP servers through a workspace-level configu
 
 Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI Theming tools will be available.
 
-<DocsAside type="note">
+<DocsAside type="info">
 MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later.
 </DocsAside>
 
@@ -106,7 +106,7 @@ Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.js
 
 The server will be picked up automatically when you open a new Cursor chat session.
 
-<DocsAside type="note">
+<DocsAside type="info">
 You can also configure MCP servers globally via **Settings → MCP** in Cursor.
 </DocsAside>
 
@@ -178,7 +178,7 @@ JetBrains AI Assistant supports MCP servers through the IDE settings:
 
 5. Click **OK** and restart the AI Assistant.
 
-<DocsAside type="note">
+<DocsAside type="info">
 MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE.
 </DocsAside>
 
@@ -231,7 +231,7 @@ globs: ["**/*.scss", "**/styles/**"]
 - For dark mode, only the palette changes. Component overrides stay the same.
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 Both files are committed to source control, so every team member gets the same AI behavior without manual setup. Adapt the brand colors, design system, and file paths to match your project.
 </DocsAside>
 
@@ -261,11 +261,11 @@ Here is a brief overview of each tool:
 | `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. |
 | `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). |
 
-<DocsAside type="note">
+<DocsAside type="info">
 For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector.
 </DocsAside>
 
-<DocsAside type="note">
+<DocsAside type="info">
 If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/autocomplete.mdx b/docs/angular/src/content/en/components/autocomplete.mdx
@@ -134,7 +134,7 @@ export class AutocompletePipeStartsWith implements PipeTransform {
 }
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The <ApiLink type="AutocompleteDirective" suffix={false} label="igxAutocomplete" /> uses the <ApiLink type="DropDown" label="igxDropDown" /> as a provider for the available options, which means that all capabilities of the dropdown component can be used in the autocomplete.
 </DocsAside>
 
@@ -213,7 +213,7 @@ export class AutocompleteComponent {
 }
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The default positioning strategy is `AutoPositionStrategy` and the dropdown is opened according to the available space.
 </DocsAside>
 
@@ -233,7 +233,7 @@ If everything went right, you should see this in your browser:
 - <kbd>ENTER</kbd> will confirm the already selected item and will close the dropdown.
 - <kbd>ESC</kbd> will close the dropdown.
 
-<DocsAside type="note">
+<DocsAside type="info">
 When the Angular autocomplete opens, then the first item on the list is automatically selected. The same is valid when the list is filtered.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/avatar.mdx b/docs/angular/src/content/en/components/avatar.mdx
@@ -249,7 +249,7 @@ shape="rounded">
 </igx-avatar>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/badge.mdx b/docs/angular/src/content/en/components/badge.mdx
@@ -67,7 +67,7 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 export class HomeComponent {}
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
 </DocsAside>
 
@@ -228,7 +228,7 @@ import { IgxBadgeModule } from 'igniteui-angular/badge';
 export class AppModule {}
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The <ApiLink type="Badge" label="igx-badge" /> has <ApiLink type="Badge" member="icon" label="icon" /> and <ApiLink type="Badge" member="type" label="type" /> inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either `Default`, `Info`, `Success`, `Warning`, or `Error`. Depending on the type, a specific background color is applied.
 </DocsAside>
 
@@ -423,7 +423,7 @@ class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]">
 </igx-badge>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/banner.mdx b/docs/angular/src/content/en/components/banner.mdx
@@ -91,7 +91,7 @@ In order to display the banner component, use its <ApiLink type="Banner" member=
 
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The `IgxBannerModule` includes a default banner button `Dismiss`, which closes the banner.
 </DocsAside>
 
@@ -114,7 +114,7 @@ Configuring the message displayed in the banner is easy - just change the conten
 
 An [`igx-icon`](/icon) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message.
 
-<DocsAside type="note">
+<DocsAside type="info">
 If several `igx-icon` elements are inserted as direct descendants of the banner, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `igx-icon` directly to the banner.
 </DocsAside>
 
@@ -212,7 +212,7 @@ export class MyBannerComponent {
 }
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 If the changes above are applied, the banner will never open, as the opening event is always cancelled.
 </DocsAside>
 
@@ -232,7 +232,7 @@ Let's create a banner with two custom buttons - one for dismissing the notificat
 </igx-banner>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 According to Google's [`Material Design`](https://material.io/design/components/banners.html#anatomy) guidelines, a banner should have a maximum of 2 buttons present. The `IgxBannerComponent` does not explicitly limit the number of elements under the `igx-banner-actions` tag, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines.
 </DocsAside>
 
@@ -272,7 +272,7 @@ $custom-banner-theme: banner-theme(
 );
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/button-group.mdx b/docs/angular/src/content/en/components/button-group.mdx
@@ -459,7 +459,7 @@ class="!light-button-group ![--item-background:#7B9E89]"
 </igx-button-group>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/button.mdx b/docs/angular/src/content/en/components/button.mdx
@@ -135,7 +135,7 @@ To create an extended FAB, you can add any element prior to the `igx-icon`:
 </button>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 To get the extended FAB text styled properly, use `<span>` or `<div>` tags.
 </DocsAside>
 
@@ -652,7 +652,7 @@ In the sample below, you can see how using the button component with customized
 
 <Sample src="/data-entries/buttons-style" height={260} alt="" />
 
-<DocsAside type="note">
+<DocsAside type="info">
 The sample uses the [Bootstrap Light](/themes/sass/schemas#predefined-schemas) schema.
 </DocsAside>
 
@@ -720,7 +720,7 @@ You can find the full list of properties in the [button-theme]({environment:sass
 </div>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/calendar.mdx b/docs/angular/src/content/en/components/calendar.mdx
@@ -38,7 +38,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 
 The next step is to import the `IgxCalendarModule` in your **app.module.ts** file.
 
-<DocsAside type="note">
+<DocsAside type="info">
 The <ApiLink type="Calendar" label="**IgxCalendarComponent**" /> also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) and **optionally** the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) for touch interactions, so they need to be added to the AppModule as well:
 </DocsAside>
 
@@ -81,7 +81,7 @@ export class HomeComponent {}
 
 Now that you have the Ignite UI for Angular Calendar module or directives imported, you can start using the `igx-calendar` component.
 
-<DocsAside type="note">
+<DocsAside type="info">
 The <ApiLink type="Calendar" /> uses the [Intl Web API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) for localization and formatting of dates.
 </DocsAside>
 Consider using [appropriate polyfills](https://github.com/andyearnshaw/Intl.js/) if your target platform does not support them.
@@ -122,7 +122,7 @@ Following the same approach, we can switch to range selection mode:
 
 <Sample src="/scheduling/calendar-sample-8" height={480} alt="" />
 
-<DocsAside type="note">
+<DocsAside type="info">
 Notice that the calendar header is not rendered when the selection is either `multi` or `range`.
 </DocsAside>
 
@@ -327,7 +327,7 @@ If you traverse the page using _Tab key_ you should keep in mind that based on [
 
 In an Angular Calendar that contains more than one selected dates, only the first date will be introduced as a tab stop. For example, when an Angular Calendar multi-select is enabled and you have selected the dates: _13/10/2020_, _17/10/2020_ and _21/10/2020_ only _13/10/2020_ will be accessible during tab navigation; in an Angular Calendar Range Picker, only the first date of the selected range will be part of the _page tab sequence_.
 
-<DocsAside type="note">
+<DocsAside type="info">
 Behavioral change, from _v10.2.0_ - Tab key navigation in the _days view_ is no longer available. In order to navigate between the dates in the _date view_ you should use the _arrow keys_.
 </DocsAside>
 
@@ -371,7 +371,7 @@ When an `year` inside the decade view is focused, use:
 - <kbd>Arrow up</kbd> and <kbd>Arrow down</kbd> keys to navigate through the years,
 - <kbd>Enter</kbd> key to select the currently focused year and close the view.
 
-<DocsAside type="note">
+<DocsAside type="info">
 Following version 8.2.0, keyboard navigation will not focus days that are outside of current month, but will rather change the month in view.
 </DocsAside>
 
@@ -395,7 +395,7 @@ To do that, use the `[headerOrientation]` property, setting it respectively to `
 You can set the view orientation to place the months in the calendar either horizontally(side by side) or vertically(above one another).
 To do that, use the `[orientation]` property, setting it respectively to `horizontal` or `vertical`.
 
-<DocsAside type="note">
+<DocsAside type="info">
 You need at least two month view calendar to see that property working.
 </DocsAside>
 
@@ -799,7 +799,7 @@ class="!light-calendar
 </igx-calendar>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/card.mdx b/docs/angular/src/content/en/components/card.mdx
@@ -440,7 +440,7 @@ elevated>
 </igx-card>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/carousel.mdx b/docs/angular/src/content/en/components/carousel.mdx
@@ -38,7 +38,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 
 The next step is to import the **IgxCarouselModule** in our **app.module.ts** file:
 
-<DocsAside type="note">
+<DocsAside type="info">
 This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.
 </DocsAside>
 
@@ -201,7 +201,7 @@ To achieve this we will use the <ApiLink type="CarouselPrevButtonDirective" suff
 ...
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
 </DocsAside>
 
@@ -332,7 +332,7 @@ The carousel [animations](/carousel#angular-carousel-animations) are fully suppo
 
 The **IgxCarousel** can be easily configured to change the slides automatically, without any user interaction. This way you can create your own slideshow by only setting a transition interval to the <ApiLink type="Carousel" member="interval" label="interval" /> property, which determines the amount of time in milliseconds between slides transition.
 
-<DocsAside type="note">
+<DocsAside type="info">
 The automatic slide transitioning is not entirely user-independent by default. Positioning the mouse pointer over a slide will interrupt the current slide transition until the mouse pointer leaves the slide area. This can be prevented by setting <ApiLink type="Carousel" member="pause" label="pause" /> property to `false`.
 </DocsAside>
 
@@ -385,7 +385,7 @@ adding <ApiLink type="List" />:
 
 syncing the components by hooking up on carousel's <ApiLink type="Carousel" member="slideChanged" label="slideChanged" /> and list's <ApiLink type="List" member="itemClicked" label="itemClicked" /> events:
 
-<DocsAside type="note">
+<DocsAside type="info">
 As of v15.1.0 `onSlideChanged` was renamed to `slideChanged`. Using `ng update` will automatically migrate your code prior to use the new event name.
 </DocsAside>
 
@@ -759,7 +759,7 @@ You can find the full list of properties in the [carousel-theme]({environment:sa
 </igx-carousel>
 ```
 
-<DocsAside type="note">
+<DocsAside type="info">
 The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx
@@ -14,7 +14,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 
 All Ignite UI for Angular charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis.
 
-<DocsAside type="note">
+<DocsAside type="info">
 the following examples can be applied to `CategoryChart` as well as `FinancialChart` controls.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx
@@ -13,7 +13,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 
 All Ignite UI for Angular charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below.
 
-<DocsAside type="note">
+<DocsAside type="info">
 the following examples can be applied to `CategoryChart` as well as `FinancialChart` controls.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx
@@ -14,7 +14,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 
 In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data.
 
-<DocsAside type="note">
+<DocsAside type="info">
 These features are designed to support cartesian axes and does not currently support radius or angle axes.
 </DocsAside>