Innovaccer AI Component Library

https://innovaccer.github.io/mds-ai
Admin
Innovaccer AI Component Library is a React component library featuring reusable UI components like...
Tokens:974
Snippets:9
Trust Score:8.3
Update:7 months ago
Show doc for...
Tokens:
Raw
### AIButton Primary Button Example

Source: https://innovaccer.github.io/mds-ai/index_path=%2Fdocs%2Fcomponents-aibutton--docs

This snippet demonstrates how to render a primary-styled AIButton. It takes 'children' as its content and 'appearance' to define its style. No specific dependencies are required beyond the AIButton component itself.

```jsx
<AIButton appearance="primary">
  Primary Button
</AIButton>
```

--------------------------------

### AIButton Basic Button Example with onClick

Source: https://innovaccer.github.io/mds-ai/index_path=%2Fdocs%2Fcomponents-aibutton--docs

This example shows a basic AIButton with an onClick event handler. The 'onClick' property accepts a function to be executed when the button is clicked. This is a fundamental way to make buttons interactive.

```jsx
<AIButton onClick={() => {}}>
  Basic Button
</AIButton>
```

--------------------------------

### AIButton Appearance Variations

Source: https://innovaccer.github.io/mds-ai/index_path=%2Fdocs%2Fcomponents-aibutton--docs

This example showcases how to render both primary and basic AIButtons side-by-side using the 'appearance' property. It also applies custom class names for spacing. This demonstrates styling flexibility and layout control.

```jsx
() => {
  return <div className="d-flex">
      <AIButton appearance="primary" className="mr-10">
        Primary Button
      </AIButton>
      <AIButton>Basic Button</AIButton>
    </div>;
}
```

--------------------------------

### AIButton Disabled Primary Button Example

Source: https://innovaccer.github.io/mds-ai/index_path=%2Fdocs%2Fcomponents-aibutton--docs

This snippet illustrates how to render a disabled primary AIButton. The 'disabled' boolean property prevents user interaction with the button. This is useful for indicating a state where the action is not currently available.

```jsx
<AIButton
  appearance="primary"
  disabled
>
  Disabled Button
</AIButton>
```

--------------------------------

### AIButton Properties Table

Source: https://innovaccer.github.io/mds-ai/index_path=%2Fstory%2Fcomponents-aibutton--basic

This table outlines the properties available for the AIButton component. It includes details on the property name, its description, default value, and the type of control used for setting it in Storybook.

```markdown
Name| Description| Default| Control  
---|---|---|---
children| Pass children to `Button`string| -| Basic Button  
appearance| Defines Appearance of the `Button`union| 'basic'| primarybasic  
onClick| Handler to be called when `Button` is clicked(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void| -| -  
type| Type of `Button`union| -| buttonsubmitreset  
disabled| Disables the `Button`boolean| -| Set boolean  
tabIndex| Specifies tab index of `Button`number| -| Set number  
onMouseEnter| Handler to be called when mouse pointer enters `Button`.(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void| -| -  
onMouseLeave| Handler to be called when mouse pointer leaves `Button`.(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void| -| -  
data-test| Stores custom testing data private to the component.string| -| Set string  
className| Adds className to `Button`string| -| Set string  
```
Tokens:
Raw