diff --git a/docs/angular/src/content/en/components/button.mdx b/docs/angular/src/content/en/components/button.mdx deleted file mode 100644 index 3e27a70f33..0000000000 --- a/docs/angular/src/content/en/components/button.mdx +++ /dev/null @@ -1,789 +0,0 @@ ---- -title: Angular Button Component - Ignite UI for Angular - MIT license -description: Enhance standard buttons with built-in text, images and more features using Ignite UI for Angular Button component. Try it now. -keywords: Angular Button component, Angular Button control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Angular UI Components, -license: MIT -llms: - description: "Angular Button directive is used for creating and adding actionable buttons to a web page/application." ---- - -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - -# Angular Button Overview - -Angular Button directive is used for creating and adding actionable buttons to a web page/application. There are different Angular Button types that are easy to customize and include several built-in features. By default, Angular Material uses native `', - styleUrls: ['home.component.scss'], - standalone: true, - imports: [IgxButtonDirective] -}) -export class HomeComponent {} -``` - -Now that you have the Ignite UI for Angular Button module or directive imported, you can start using the `igxButton` directive on elements. - -## Angular Button Types - -### Flat Button - -Use the directive to add a simple flat button in your component template. Note that if you do not choose a type, by default it will be set to `flat`. - -```html - -``` - - - -### Contained Button - -All you have to do to create a contained button is to change the value of the `igxButton` property: - -```html - -``` - - - -### Outlined Button - -Analogically, we can switch to outlined type: - -```html - -``` - - - -### Icon Button - -As of version `17.1.0` the IgniteUI for Angular exposes a new `igxIconButton` directive intended to turn icons into fully functional buttons. You can read more about the [_Icon Button here_](/icon-button). - -```html - -``` - - - -This component uses Material Icons. Add the following link to your `index.html`: `` - - - - -### Floating Action Button - -We can create a floating action button and use an icon to display: - -```html - -``` - -To create an extended FAB, you can add any element prior to the `igx-icon`: - -```html - -``` - - -To get the extended FAB text styled properly, use `` or `
` tags. - - - - -## Examples - -### Angular Disable Button - -The `disabled` property can be used to make a button unclickable: - -```html - -``` - - - -### Ripple - -The directive adds a ripple effect to your buttons or other specified elements. You can easily change the default ripple color, position and duration, using its properties: - -```html - -``` - - - -### Span - -We can also use the `igxButton` directive to turn elements like `span` and `div` into Ignite UI for Angular styled buttons. The default colors can be customized via the `igxButtonColor` and the `igxButtonBackground` properties: - -```html - - Span - -``` - - - -## Size - -We can allow the user to choose the size of the `igxButton` by using the `--ig-size` custom CSS property. To do this, first we have to import the `IgxButtonGroupModule`, and then use the component to display size values. This way whenever one gets selected, we will update the **--ig-size** CSS property. - -```typescript -// app.module.ts -... -import { IgxButtonGroupModule } from 'igniteui-angular/button-group'; -// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package -@NgModule({ - imports: [ - ... - IgxButtonGroupModule - ... - ] -}) -``` - -```html -{/*buttons-density.component.html*/} - -... - -``` - -```typescript -// buttons-density.component.ts -public size = "large"; -public sizes; -public ngOnInit() { - this.sizes = [ - { label: 'large', selected: this.size === 'large', togglable: true }, - { label: 'medium', selected: this.size === 'medium', togglable: true }, - { label: 'small', selected: this.size === 'small', togglable: true } - ]; -} - -public selectSize(event: any) { - this.size = this.sizes[event.index].label; -} - -@HostBinding('style.--ig-size') -protected get sizeStyle() { - return `var(--ig-size-${this.size})`; -} -``` - -If all went well, you should see something like the following in the browser: - - - -
- -## Styling - -### Button Theme Property Map - -When you modify a primary property, all related dependent properties are updated automatically: - -
- - - - - - - - - -
- -
- -### Material Theme - -#### Flat Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | - -#### Contained Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-background | Focus background color | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $active-background | Active background color | -| | $active-foreground | Active foreground color | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | - -#### Outlined Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $border-color | The border color for outlined buttons. | -| | $hover-border-color | The border color for hovered outlined buttons. | -| | $focus-border-color | The border color for focused outlined buttons. | -| | $focus-visible-border-color | The border color for outlined buttons when focus is visible. | -| | $active-border-color | The border color for active outlined buttons. | - -#### FAB Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-background | Focus background color | -| | $focus-foreground | Foreground on focus | -| | $active-background | Active background color | -| | $active-foreground | Active foreground color | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | - -
- -
- -### Fluent Theme - -#### Flat Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | - -#### Contained Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $focus-background | Focus background color | -| | $active-background | Active background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-foreground | Foreground on focus | -| | $active-foreground | Active foreground color | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | - -#### Outlined Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered outlined button. | -| | $focus-background | Background color for focused outlined button. | -| | $focus-hover-background | Background color for outlined button on focus + hover. | -| | $active-background | Background color for active outlined button. | -| | $hover-foreground | Foreground color for hovered outlined button. | -| | $icon-color-hover | Icon color for hovered outlined button. | -| | $focus-foreground | Foreground color for focused outlined button. | -| | $focus-hover-foreground | Foreground color for outlined button on focus + hover. | -| | $active-foreground | Foreground color for active outlined button. | -| | $focus-visible-foreground | Foreground color for outlined button when focus is visible. | -| | $focus-visible-border-color | Border color for outlined button when focus is visible. | -| | $border-color | Border color for outlined button. | -| | $hover-border-color | Border color for hovered outlined button. | -| | $focus-border-color | Border color for focused outlined button. | -| | $active-border-color | Border color for active outlined button. | - -#### FAB Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $active-background | Active background color | -| | $active-foreground | Active foreground color | -| | $focus-background | Focus background color | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | - -
- -
- -### Bootstrap Theme - -#### Flat Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | -| | $disabled-foreground | Foreground color for disabled button | -| | $disabled-icon-color | Icon color for disabled button | -| | $shadow-color | Shadow color | - -#### Contained Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $focus-background | Focus background color | -| | $active-background | Active background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $active-foreground | Active foreground color | -| | $shadow-color | Shadow color | -| | $disabled-background | Disabled background color | -| | $disabled-foreground | Disabled foreground color | -| | $disabled-icon-color | Disabled icon color | - -#### Outlined Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | -| | $disabled-foreground | Foreground color for disabled button | -| | $disabled-icon-color | Icon color for disabled button | -| | $disabled-border-color | Border color for disabled button | -| | $hover-border-color | Hover border color | -| | $focus-border-color | Focus border color | -| | $active-border-color | Active border color | -| | $shadow-color | Shadow color | - -#### FAB Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $focus-background | Focus background color | -| | $active-background | Active background color | -| | $disabled-background | Disabled background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $active-foreground | Active foreground color | -| | $shadow-color | Shadow color | -| | $disabled-foreground | Disabled foreground color | -| | $disabled-icon-color | Disabled icon color | - -
- -
- -### Indigo Theme - -#### Flat Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $disabled-foreground | Disabled foreground color | -| | $disabled-icon-color | Disabled icon color | -| | $shadow-color | Shadow color | - -#### Contained Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $focus-background | Focus background color | -| | $active-background | Active background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $active-foreground | Active foreground color | -| | $shadow-color | Shadow color | -| | $disabled-background | Disabled background color | -| | $disabled-foreground | Disabled foreground color | -| | $disabled-icon-color | Disabled icon color | - -#### Outlined Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | -| | $border-color | Border color | -| | $hover-border-color | Hover border color | -| | $focus-border-color | Focus border color | -| | $active-border-color | Active border color | -| | $shadow-color | Shadow color | - -#### FAB Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $focus-background | Focus background color | -| | $active-background | Active background color | -| | $disabled-background | Disabled background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $active-foreground | Active foreground color | -| | $shadow-color | Shadow color | -| | $disabled-foreground | Disabled foreground color | -| | $disabled-icon-color | Disabled icon color | - -
- -
- -
- - -> **Note:** The resulting dependent properties may vary slightly depending on the selected theme (Material, Fluent, Bootstrap, Indigo). - -To style the button you can use our type-specific theme functions: , , , and . - -Each of them will target only the buttons of that specific type. - -To get started, first import the themes module, which includes all theme functions and component mixins: - -```scss -@use "igniteui-angular/theming" as *; - -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; -``` - -Next, create a new theme that extends the type-specific theme function for the type of button you are styling. In this example, we will use the function and pass values to the `$foreground` and the `$background` parameters, along with their respective hover and active parameters. - -Given the following markup: - -```html -
- - -
-``` - -You can create the following theme: - -```scss -$custom-contained-theme: contained-button-theme( - $background: #f9f0ff, - $foreground: #722ed1, - $hover-background: #efdbff, - $hover-foreground: #9254de, - $active-foreground: #531dab, - $active-background: #dfc2fa, -); -``` - -Take a look at the section for a complete list of available parameters for styling the contained-type buttons. - -Finally, **include** the custom theme in your application: - -```scss -.my-contained-btn { - @include tokens($custom-contained-theme); -} -``` - -With the type-specific theme functions, styling buttons is much easier. - -For and functions, you only need to provide a color value to the `$background` parameter. All other button state and text colors (if they are not provided) will then be automatically generated and applied based on that value. - -The text color is determined by the newly added function, which calculates whether black or white provides better contrast against the supplied background color. - -For and functions, the button state colors are also automatically generated and applied, but they are derived from the supplied `$foreground` parameter instead of `$background`. - -In the sample below, you can see how using the button component with customized CSS variables allows you to create a design that visually resembles the button used in the [`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) design system. - - - - -The sample uses the [Bootstrap Light](/themes/sass/schemas#predefined-schemas) schema. - - -### Styling with Tailwind - -You can style the `button` using our custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first. - -Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: - -```scss -@import "tailwindcss"; -... -@use 'igniteui-theming/tailwind/utilities/material.css'; -``` - -The utility file includes both `light` and `dark` theme variants. - -- Use `light-*` classes for the light theme. -- Use `dark-*` classes for the dark theme. -- Append the component name after the prefix. Because the button has types, the classes are used like so, e.g., `light-contained-button`, `light-flat-button` `dark-outlined-button`, `dark-fab-button`, etc. - -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). - -You can find the full list of properties in the which reflect differently in the different variants, the primary property for the `flat` and `outlined` buttons is `$foreground` and for the `contained` and `fab` buttons is `$background`. The syntax is as follows: - -```html -
- -
- - - -
-
- - - -
-
- - - -
-
- - - -
-
-``` - - -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. - - -At the end your buttons should look like this: - - - -### Custom sizing - -You can change the button height either by using the `--size` variable, targeting the `button` directly: - -```scss -button { - --size: 50px; -} -``` - -Or you can use the universal `--ig-button-size` variable to target all instances: - -```html -
- - -
-``` - -```scss -.my-app { - --ig-button-size: 50px; -} -``` - -You can also use one of the predefined sizes, assigning it to the `--ig-size` variable. The available values for `--ig-size` are `--ig-size-small`, `--ig-size-medium`, and `--ig-size-large`: - -```scss -button { - --ig-size: var(--ig-size-large); -} -``` - -Learn more about it in the [Size](/display-density) article. - -
- -## API References -
-- -- -- -- -- -## Additional Resources - -
- -Our community is active and always welcoming to new ideas. - -- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/en/components/dialog.mdx b/docs/angular/src/content/en/components/dialog.mdx index 4ca3c0c1c1..a07ecaafbf 100644 --- a/docs/angular/src/content/en/components/dialog.mdx +++ b/docs/angular/src/content/en/components/dialog.mdx @@ -295,7 +295,7 @@ $my-dialog-theme: dialog-theme( ``` -In order to style any additional components that are used as part of the dialog window's content (such as the [`IgxButton`](/button)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application). +In order to style any additional components that are used as part of the dialog window's content (such as the [`IgxButton`](./inputs/button.mdx)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application). ```scss diff --git a/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx index d5f1885a78..70e4de5647 100644 --- a/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx +++ b/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx @@ -415,7 +415,7 @@ Related topics: - [Component Themes](../sass/component-themes.mdx) - [Typography](../sass/typography.mdx) - [Avatar Component](../../layouts/avatar.mdx) -- [Button Component](../../button.mdx) +- [Button Component](inputs/button) - [Dialog Component](../../dialog.mdx) - [Icon Component](../../icon.mdx) - [Expansion Panel Component](../../expansion-panel.mdx) diff --git a/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx index 687791b0b3..69861c543b 100644 --- a/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx +++ b/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx @@ -368,7 +368,7 @@ Ignite UI for Angular exposes four default type scales for each of its themes, w - [Component Themes](/themes/sass/component-themes) - [Typography](/themes/sass/typography) - [Avatar Component](../../layouts/avatar.mdx) -- [Button Component](/button) +- [Button Component](inputs/button) - [Dialog Component](/dialog) - [Icon Component](/icon) - [List Component](/list) diff --git a/docs/angular/src/content/en/components/themes/roundness.mdx b/docs/angular/src/content/en/components/themes/roundness.mdx index b0ef36f9cc..070ec5704a 100644 --- a/docs/angular/src/content/en/components/themes/roundness.mdx +++ b/docs/angular/src/content/en/components/themes/roundness.mdx @@ -20,7 +20,7 @@ Many Ignite UI components have predefined minimum and maximum border-radius valu When you set `--ig-radius-factor` to 0, the component uses its minimum border-radius and will appear more block-like with sharp corners. When set to 1, the component uses its maximum predefined border-radius and will appear rounded. Here is a list of the components that have predefined minimum and maximum border-radius values and can be modified using the `--ig-radius-factor` variable:
-• [Action Strip](/action-strip) • [Button](/button) • [Button Group](/button-group) • [Calendar](/calendar) • [Card](/card) • [Carousel](/carousel) • [Checkbox](/checkbox) • [Chip](/chip) • [Combo](/combo) • [Date Picker](/date-picker) • [Date Range Picker](/date-range-picker) • [Grid](/grid/grid) • [Input Group](/input-group) • [Linear Progress](/linear-progress) • [List](/list) • [Month Picker](/month-picker) • [Navigation Drawer](/navdrawer) • [Radio](/radio-button) • [Ripple](/ripple) • [Snackbar](/snackbar) • [Switch](/switch) • [Toast](/toast) +• [Action Strip](/action-strip) • [Button](inputs/button) • [Button Group](/button-group) • [Calendar](/calendar) • [Card](/card) • [Carousel](/carousel) • [Checkbox](/checkbox) • [Chip](/chip) • [Combo](/combo) • [Date Picker](/date-picker) • [Date Range Picker](/date-range-picker) • [Grid](/grid/grid) • [Input Group](/input-group) • [Linear Progress](/linear-progress) • [List](/list) • [Month Picker](/month-picker) • [Navigation Drawer](/navdrawer) • [Radio](/radio-button) • [Ripple](/ripple) • [Snackbar](/snackbar) • [Switch](/switch) • [Toast](/toast) ## Usage diff --git a/docs/angular/src/content/en/components/time-picker.mdx b/docs/angular/src/content/en/components/time-picker.mdx index 8757d00a47..1c17871361 100644 --- a/docs/angular/src/content/en/components/time-picker.mdx +++ b/docs/angular/src/content/en/components/time-picker.mdx @@ -408,7 +408,7 @@ $my-time-picker-theme: time-picker-theme( ``` -In order to style any additional components that are used as part of the time picker window's content (such as the [`IgxButton`](/button)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application). +In order to style any additional components that are used as part of the time picker window's content (such as the [`IgxButton`](./inputs/button.mdx)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application). Since the time picker window uses the [`IgxOverlayService`](/overlay), in order for our custom theme to reach down the time picker window that we want to style, we will provide a specific outlet where the dialog window will be placed in the DOM when it is visible. diff --git a/docs/angular/src/content/en/components/toc.json b/docs/angular/src/content/en/components/toc.json index 056691d8fc..c4ab63e89c 100644 --- a/docs/angular/src/content/en/components/toc.json +++ b/docs/angular/src/content/en/components/toc.json @@ -1950,7 +1950,7 @@ }, { "name": "Button", - "href": "button.mdx" + "href": "inputs/button.mdx" }, { "name": "Button Group", diff --git a/docs/angular/src/content/en/components/tooltip.mdx b/docs/angular/src/content/en/components/tooltip.mdx index 5a2eb9de05..473d5d925a 100644 --- a/docs/angular/src/content/en/components/tooltip.mdx +++ b/docs/angular/src/content/en/components/tooltip.mdx @@ -486,7 +486,7 @@ $dark-tooltip: tooltip-theme( ``` -In order to style any additional components that are used as part of the tooltip's content (such as [`IgxButton`](/button), [`IgxSwitch`](/switch), etc.), an additional theme should be created that is specific to the respective component and placed under the tooltip's scope only (so it does not affect the rest of the application). +In order to style any additional components that are used as part of the tooltip's content (such as [`IgxButton`](./inputs/button.mdx), [`IgxSwitch`](/switch), etc.), an additional theme should be created that is specific to the respective component and placed under the tooltip's scope only (so it does not affect the rest of the application). Since the tooltip uses the [`IgxOverlayService`](/overlay), in order for our custom theme to reach down the tooltip that we want to style, we will provide a specific outlet where the tooltip will be placed in the DOM when it is visible. diff --git a/docs/angular/src/content/en/grids_templates/row-editing.mdx b/docs/angular/src/content/en/grids_templates/row-editing.mdx index 459dbf76f3..3d6044f05b 100644 --- a/docs/angular/src/content/en/grids_templates/row-editing.mdx +++ b/docs/angular/src/content/en/grids_templates/row-editing.mdx @@ -320,9 +320,9 @@ If you want the buttons to be part of the keyboard navigation, then each on of t Using the [Ignite UI for Angular Theme Library](/themes), we can greatly alter the Row Editing overlay. The Row Editing overlay is a composite element - its UI is comprised of a couple of other components: - [`igx-banner`](/banner) in order to render its contents - - [`igx-button`](/button)s are rendered in the default template (for the `Done` and `Cancel` buttons). + - [`igx-button`](inputs/button)s are rendered in the default template (for the `Done` and `Cancel` buttons). -In the below example, we will make use of those two components' styling options, [`button styling`](/button#styling) & [`banner-styling`](/banner#styling), to customize the experience of our {ComponentName}'s Row Editing. +In the below example, we will make use of those two components' styling options, [`button styling`](inputs/button#styling) & [`banner-styling`](/banner#styling), to customize the experience of our {ComponentName}'s Row Editing. We will also style the current cell's editor and background to make it more distinct. diff --git a/docs/angular/src/content/en/grids_templates/search.mdx b/docs/angular/src/content/en/grids_templates/search.mdx index c75a46a425..d0330d3f09 100644 --- a/docs/angular/src/content/en/grids_templates/search.mdx +++ b/docs/angular/src/content/en/grids_templates/search.mdx @@ -260,7 +260,7 @@ What if we would like to filter and sort our {ComponentTitle} or even to add and ### Adding icons By using some of our other components, we can create an enriched user interface and improve the overall design of our entire search bar! We can have a nice search or delete icon on the left of the search input, a couple of chips for our search options and some material design icons combined with nice ripple styled buttons for our navigation on the right. We can wrap these components inside an input group for a more refined design. -To do this, let's go and grab the [**IgxInputGroup**](/input-group), [**IgxIcon**](/icon), [**IgxRipple**](/ripple), [**IgxButton**](/button) and the [**IgxChip**](/chip) modules. +To do this, let's go and grab the [**IgxInputGroup**](/input-group), [**IgxIcon**](/icon), [**IgxRipple**](/ripple), [**IgxButton**](inputs/button) and the [**IgxChip**](/chip) modules. ```typescript // app.module.ts diff --git a/docs/angular/src/content/en/images/anatomy-content-light/button-lt-a.png b/docs/angular/src/content/en/images/anatomy-content-light/button-lt-a.png new file mode 100644 index 0000000000..05656c6c3e Binary files /dev/null and b/docs/angular/src/content/en/images/anatomy-content-light/button-lt-a.png differ diff --git a/docs/angular/src/content/en/images/button/button-do-1.png b/docs/angular/src/content/en/images/button/button-do-1.png new file mode 100644 index 0000000000..9243c7edbd Binary files /dev/null and b/docs/angular/src/content/en/images/button/button-do-1.png differ diff --git a/docs/angular/src/content/en/images/button/button-do-2.png b/docs/angular/src/content/en/images/button/button-do-2.png new file mode 100644 index 0000000000..d833307a65 Binary files /dev/null and b/docs/angular/src/content/en/images/button/button-do-2.png differ diff --git a/docs/angular/src/content/en/images/button/button-do-3.png b/docs/angular/src/content/en/images/button/button-do-3.png new file mode 100644 index 0000000000..d833307a65 Binary files /dev/null and b/docs/angular/src/content/en/images/button/button-do-3.png differ diff --git a/docs/angular/src/content/en/images/button/button-do-not-1.png b/docs/angular/src/content/en/images/button/button-do-not-1.png new file mode 100644 index 0000000000..2f37198ea3 Binary files /dev/null and b/docs/angular/src/content/en/images/button/button-do-not-1.png differ diff --git a/docs/angular/src/content/en/images/button/button-do-not-2.png b/docs/angular/src/content/en/images/button/button-do-not-2.png new file mode 100644 index 0000000000..aa39725522 Binary files /dev/null and b/docs/angular/src/content/en/images/button/button-do-not-2.png differ diff --git a/docs/angular/src/content/en/images/button/button-do-not-3.png b/docs/angular/src/content/en/images/button/button-do-not-3.png new file mode 100644 index 0000000000..473d3e6ed6 Binary files /dev/null and b/docs/angular/src/content/en/images/button/button-do-not-3.png differ diff --git a/docs/xplat/src/assets/images/button/button-do-1.png b/docs/xplat/src/assets/images/button/button-do-1.png new file mode 100644 index 0000000000..9243c7edbd Binary files /dev/null and b/docs/xplat/src/assets/images/button/button-do-1.png differ diff --git a/docs/xplat/src/assets/images/button/button-do-2.png b/docs/xplat/src/assets/images/button/button-do-2.png new file mode 100644 index 0000000000..d833307a65 Binary files /dev/null and b/docs/xplat/src/assets/images/button/button-do-2.png differ diff --git a/docs/xplat/src/assets/images/button/button-do-3.png b/docs/xplat/src/assets/images/button/button-do-3.png new file mode 100644 index 0000000000..d833307a65 Binary files /dev/null and b/docs/xplat/src/assets/images/button/button-do-3.png differ diff --git a/docs/xplat/src/assets/images/button/button-do-not-1.png b/docs/xplat/src/assets/images/button/button-do-not-1.png new file mode 100644 index 0000000000..2f37198ea3 Binary files /dev/null and b/docs/xplat/src/assets/images/button/button-do-not-1.png differ diff --git a/docs/xplat/src/assets/images/button/button-do-not-2.png b/docs/xplat/src/assets/images/button/button-do-not-2.png new file mode 100644 index 0000000000..aa39725522 Binary files /dev/null and b/docs/xplat/src/assets/images/button/button-do-not-2.png differ diff --git a/docs/xplat/src/assets/images/button/button-do-not-3.png b/docs/xplat/src/assets/images/button/button-do-not-3.png new file mode 100644 index 0000000000..473d3e6ed6 Binary files /dev/null and b/docs/xplat/src/assets/images/button/button-do-not-3.png differ diff --git a/docs/xplat/src/content/en/components/inputs/button.mdx b/docs/xplat/src/content/en/components/inputs/button.mdx index 838d023665..41ce6cb337 100644 --- a/docs/xplat/src/content/en/components/inputs/button.mdx +++ b/docs/xplat/src/content/en/components/inputs/button.mdx @@ -1,40 +1,172 @@ --- -title: "{Platform} Button Component | {ProductName}" +title: "Button Component" description: Get started with the {Platform} Button Component. Select button variants, configure sizes, define styling, and gain flexibility through the {Platform} Button OnClick event. keywords: "{Platform}, UI controls, web widgets, UI widgets, {Platform} Button Components, Infragistics" mentionedTypes: ["Button", "ButtonBase"] license: MIT +last_updated: 2026-08-13 +relatedComponents: [IconButton] llms: description: "The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app." --- import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import Anatomy from 'igniteui-astro-components/components/mdx/Anatomy.astro'; +import Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; +import { Image } from 'astro:assets'; +import buttonAnatomy from '@xplat-images/anatomy-content-light/button-lt-a.png'; +import buttonDo1 from '@xplat-images/button/button-do-1.png'; +import buttonDo2 from '@xplat-images/button/button-do-2.png'; +import buttonDo3 from '@xplat-images/button/button-do-3.png'; +import buttonDoNot1 from '@xplat-images/button/button-do-not-1.png'; +import buttonDoNot2 from '@xplat-images/button/button-do-not-2.png'; +import buttonDoNot3 from '@xplat-images/button/button-do-not-3.png'; +# Button Component -# {Platform} Button Overview +The {Platform} Button component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over button variants, styling, and sizes. The Button component also lets you handle clicks, toggle the button, and disable it when needed. - +## Live Demo -The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button OnClick event, toggle the {Platform} button, disable the {Platform} button, and more. + + + - + -The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button clicked callback, toggle the {Platform} button, disable the {Platform} button, and more. + -## {Platform} Button Example +## Anatomy - +The {Platform} Button renders its label and optional prefix and suffix content in the component shadow DOM. -## Usage + + + + +
+
+ A - Contained Button + 1. Icon (optional) + 2. Label + 3. Container +
+
+ B - Outlined Button + 4. Icon (optional) + 5. Label + 6. Container +
+
+ C - Flat Button + 7. Icon (optional) + 8. Label +
+
+ D - Fab Icon Button + 9. Icon + 10. Container +
+
+ +The Button renders its content inside the `base` CSS part. Use the default slot for the label and the `prefix` and `suffix` slots for optional content before and after the label. + +```text + +├── ::part(base) +├── prefix slot +├── default slot content +└── suffix slot + +``` + +## Getting Started + +To use the {Platform} Button, follow the [{ProductName} Getting Started](../general-getting-started.mdx) topic for the basic project setup, then register the component for your target platform. + +### Prerequisites and Version Compatibility + +Use a supported version of the {ProductName} package for your target framework. Keep the framework package, the Button package, and the theme package on the same release version. The examples below identify the framework and package used by each code block so that the snippets remain self-contained when read without the surrounding page context. + + + +For Angular using the **igniteui-angular** package, install the package: + +```cmd +npm install igniteui-angular +``` + +Then import the Button directive: + +```ts +import { IgxButtonModule } from 'igniteui-angular/directives'; +``` + +Add `IgxButtonModule` to the component `imports` collection, then use the `igxButton` directive in your template. + +```html + +``` + + -First, you need to install the {ProductName} by running the following command: +For Web Components using the **{PackageWebComponents}** package, install the package: ```cmd npm install {PackageWebComponents} @@ -55,7 +187,7 @@ For a complete introduction to the {ProductName}, read the [**Getting Started**] -First, you need to the install the corresponding {ProductName} npm package by running the following command: +For React using the **igniteui-react** package, install the package: ```cmd npm install igniteui-react @@ -72,7 +204,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -Before using the , you need to register it as follows: +For Blazor using the **IgniteUI.Blazor** package, register the Button module as follows: ```csharp // in Program.cs file @@ -114,12 +246,44 @@ The simplest way to start using the is as f -## Prefix / Suffix +## Usage + +Use the {Platform} Button to trigger an action, submit form data, or navigate to another page. Choose the appropriate button type and variant for the action, then add optional content such as icons when needed. + +The Button content is placed in its default slot. Add the action label as the button content so that the purpose of the action is clear to all users. + + + +```html + +``` + + + + + +```html +Save changes +``` + + With `prefix` and `suffix` slots of the component, we can add different content before and after the main content of the button. We recommend using a `` element when adding simple text, symbols, or emojis, and an [``](../layouts/icon.mdx) component when adding icons to the `prefix` and `suffix` slots. + + +```html + +``` + + + ```tsx @@ -153,7 +317,7 @@ We recommend using a `` element when adding simple text, symbols, or emoji -## Type +### Type The button component will change its internal structure from a [` +``` + + + + + + + +```tsx + + + ``` @@ -304,71 +520,131 @@ defineComponents(IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent); ```html - - Small - Medium - Large - + +``` + + + + + +```razor + +``` + + + + + + + + + +### States + +You may also insert each Button in a disabled state because they all support both Enabled and Disabled variants. In Figma, you can switch between the two using a boolean property in the properties panel. In code, use the `disabled` property or attribute when an action is not currently available. + + + +```html + +``` + + + + + + + +```tsx +Disabled ``` -```ts -this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent; -this.outlinedButton = document.getElementById('outlined-btn') as IgcButtonComponent; -this.flatButton = document.getElementById('flat-btn') as IgcButtonComponent; -this.containedButton = document.getElementById('contained-btn') as IgcButtonComponent; -this.fabButton = document.getElementById('fab-btn') as IgcButtonComponent; +```html +Disabled +``` -this.radioGroup.addEventListener('click', (radio: any) => { - this.outlinedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`); - this.flatButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`); - this.containedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`); - this.fabButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`); -}); + + + + +```razor +Disabled ``` + + + + + + +### Interaction States + +In Figma the Enabled buttons support **Idle**, Hover, Focused and Focused & Hover states which can be switched between by changing the `State` property. In code, these interaction states are provided by the platform Button component and should preserve a visible focus indicator for keyboard users. + + + +```html + +``` + + + + + + + +```html +Ripple and focus states +``` + + + + + +### Layout Template + +Contained, Outlined, Flat, and Floating Action Buttons support flexible icon and label templates. In Figma, to show or hide the icons, you can use the `Left Icon` and `Right Icon` boolean properties. If you want to have an Icon Button, you can set the `Content` property to `Icon`. + + + +```html + + Span button + +``` + + + + + ```tsx -import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react'; - -const [size, setSize] = useState("small"); - -const onRadioChange = (e: IgrRadioChangeEventArgs) => { - setSize(e.detail.value); -}; - - - - Small - - - Medium - - - Large - - - -
- - Flat - - - Contained - - - Outlined - - - Fab - -
+ + ★ + Save changes + → + +``` + + + + + +```html + + ★ + Save changes + → + ``` @@ -376,46 +652,94 @@ const onRadioChange = (e: IgrRadioChangeEventArgs) => { ```razor - - Small - Medium - Large - + + ★ + Save changes + → + +``` -@code { - private SizableComponentSize SizableComponentSize = SizableComponentSize.Large; + - protected override void OnInitialized() - { - } + - public void OnSmallClick(EventArgs e) - { - SizableComponentSize = SizableComponentSize.Small; - } + - public void OnMediumClick(EventArgs e) - { - SizableComponentSize = SizableComponentSize.Medium; - } + - public void OnLargeClick(EventArgs e) - { - SizableComponentSize = SizableComponentSize.Large; - } -} +### Size + +Users can change the size of the using the `--ig-size` CSS variable. + + + +```html + + Small + ``` + + +```tsx + + Small + +``` + + + + + +```razor + + Small + +``` + + + +```css +.button-size-small { + --ig-size: var(--ig-size-small); +} +``` + The result of implementing the above code should look like the following: - + + + + + + + + + + + + ### Download Setting the property will prompt the user to save the linked URL instead of navigating to it. + + +```html + +``` + + + ```tsx @@ -454,11 +778,98 @@ Setting the - + + + + + + + + + + + + +### Do/Don't + +**When to use:** Use Button for actions that change state, submit data, or trigger an application command. + +**When not to use:** Use [Icon Button](./icon-button.mdx) when the action is represented only by an icon and does not require a text label. + +
+ + + + + + + + + + + + + + + + + + + + + +
DoDon't
Button do example 1Button don't example 1
Button do example 2Button don't example 2
Button do example 3Button don't example 3
+
+ + +## Properties + +The {Platform} Button exposes platform-specific properties for controlling its content, appearance, and behavior. + + + +The Angular Button is provided as a directive and exposes the following properties. Use the API reference for the complete type definitions. + +| name | type | default | description | +| --- | --- | --- | --- | +| | string | `flat` | Sets the Button visual variant. | +| | string | `button` | Sets the native button type. | + + + + + +The {Platform} Button exposes the following properties. + +| Name | Type | Default | Description | +|--|--|--|--| +| | ButtonVariant | `contained` | Selects the Button visual variant. | +| | string | `button` | Sets the native button type when the component renders as a button. | +| | string | — | Sets the destination and uses the Button for navigation. | +| | string | — | Sets the relationship between the current document and the linked destination. | +| | string | — | Sets where the linked destination opens when `href` is set. | +| | string | — | Prompts the user to download the linked resource when `href` is set. | + ## Styling +Use the standard {ProductName} theme workflow and the Button styling variables and CSS parts to customize the component consistently with the rest of the application. + +### Sass Theming + +Use the standard {ProductName} theme workflow to customize the Button consistently with the rest of the application. + +### CSS Variables + +The Button exposes CSS variables that can be used to adjust its appearance and sizing. + +| Variable | What it changes | +|--|--| +| `--ig-size` | The Button size. | + +### Style Parts + The exposes three CSS parts which we can use for styling: |Name|Description| @@ -477,13 +888,147 @@ igc-button::part(base) { } ``` - + + + + + + + + + + + + +### Styling with Tailwind + + + +You can style the Button using custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/tailwind) first. + +Along with the Tailwind import in your global stylesheet, include the utility file: + +```scss +@import "tailwindcss"; +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +Use the variant-specific classes such as `light-flat-button`, `light-contained-button`, `light-outlined-button`, and `light-fab-button`: + +```html + +``` + +The exclamation mark (`!`) ensures that the utility class takes precedence over the Button's default theme. + + + + + + + +You can style the Button with the custom Tailwind utility classes from `igniteui-theming`. Make sure to [set up Tailwind](/themes/tailwind) first, then import the Ignite UI utilities in your global stylesheet: + +```css +@import "tailwindcss"; +@import "igniteui-theming/tailwind/utilities/material.css"; +``` + + + +```jsx +Contained Button +``` + + + + + +```html +Contained Button +``` + + + + + +```razor +Contained Button +``` + + + +The exclamation mark (`!`) gives the Tailwind utility precedence over the Button's default theme styles. + + + + + +## Accessibility + +### Keyboard Interaction + +| Key | Action | +|--|--| +| Tab | Moves focus to the Button when it is keyboard-focusable. | +| Enter / Space | Activates the focused Button. | + +### Screen Readers / ARIA + +Provide an accessible label when the visible button content does not describe the action. + +### Accessibility Compliance + +This topic does not make a product-level WCAG, Section 508, or EN 301 549 conformance claim. Verify the rendered Button and its surrounding application against the accessibility requirements that apply to the target project. + +| Criterion | How the component supports the requirement | +|--|--| +| Keyboard operation | The Button can receive focus through the keyboard when it is keyboard-focusable, and Enter or Space activates the focused control. | +| Accessible name | The Button's visible label provides its name. Provide an accessible label in the surrounding usage when the visible content does not describe the action. | +| Link semantics | When `href` is set, use the Button as navigation and verify the resulting link name and destination in the rendered application. | + +## Troubleshooting + +### Why does the Button behave like a link? + +When `href` is set, the Button is used for navigation rather than for a command action. Remove `href` when the control should trigger application logic instead of navigating to a URL. + +### Why is the Button not keyboard-focusable? + +Check whether the Button is disabled or whether the surrounding application changes its focus behavior. Use a focusable Button for actions that must be available through keyboard navigation. + +### Known Limitations + +The Button has the following platform-independent boundaries: + +- Use a text label or another accessible naming mechanism for every action; an unlabeled icon-only Button does not communicate its purpose by itself. +- Setting `href` changes the Button from an action control to a navigation control. Use [Icon Button](./icon-button.mdx) for icon-only actions and verify its accessible name separately. +- The Button's visual appearance does not determine whether the surrounding application action is available or valid; application logic must provide that state and feedback. ## API References - - + +## Dependencies + +The Button requires the corresponding {Platform} package and theme stylesheet. The sizing example also uses the Radio and RadioGroup components. ## Additional Resources - [{ProductName} **Forums**]({ForumsLink}) - [{ProductName} **GitHub**]({GithubLink}) + +## Related Components + +- [Icon Button](./icon-button.mdx) is intended for icon-only actions. + +## FAQ + + + + Set the verified `variant` value such as `contained`, `outlined`, `flat`, or `fab`. + + + Set the verified `href` property to use the Button as a link. + + diff --git a/docs/xplat/src/content/en/toc.json b/docs/xplat/src/content/en/toc.json index 2d3207de85..3ddc27a2de 100644 --- a/docs/xplat/src/content/en/toc.json +++ b/docs/xplat/src/content/en/toc.json @@ -2435,11 +2435,9 @@ "href": "inputs/badge.mdx" }, { - "exclude": [ - "Angular" - ], "name": "Button", - "href": "inputs/button.mdx" + "href": "inputs/button.mdx", + "updated": true }, { "exclude": [ @@ -2513,16 +2511,10 @@ "href": "inputs/dropdown.mdx" }, { - "exclude": [ - "Angular" - ], "name": "Icon", "href": "layouts/icon.mdx" }, { - "exclude": [ - "Angular" - ], "name": "Icon Button", "href": "inputs/icon-button.mdx" },