Animal Island UI

https://guokaigdg.github.io/animal-island-ui/
Admin
Animal Island UI is a React component library providing customizable UI components with multiple...
Tokens:980
Snippets:6
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Button Usage Example

Source: https://guokaigdg.github.io/animal-island-ui/#/button

Example demonstrating how to use the Button component with various types, states, and sizes.

```APIDOC
## Button Usage Example

### Description
This example shows how to import and use the Button component from the 'animal-island-ui' library with different configurations.

### Code
```javascript
import React from 'react';
import { Button } from 'animal-island-ui';

const App = () => {
    return (
        <div>
            {/* Primary */}
            <Button type="primary">Primary</Button>
            {/* Default */}
            <Button>Default</Button>
            {/* Dashed */}
            <Button type="dashed">Dashed</Button>
            {/* Text */}
            <Button type="text">Text</Button>
            {/* Link */}
            <Button type="link">Link</Button>
            {/* Danger */}
            <Button type="primary" danger>Danger</Button>
            {/* Ghost */}
            <Button type="primary" ghost>Ghost</Button>
            {/* Loading */}
            <Button type="primary" loading>Loading</Button>
            {/* Large */}
            <Button type="primary" size="large">Large</Button>
            {/* Icon */}
            <Button type="primary" icon={<span>🔍</span>}>搜索</Button>
            {/* Block */}
            <Button type="primary" block>Block</Button>
        </div>
    );
};

export default App;
```
```

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

### Button Component Usage Examples

Source: https://guokaigdg.github.io/animal-island-ui/#/button

Demonstrates how to use the Button component with different types, states, sizes, and icons. Ensure the 'animal-island-ui' library is imported.

```jsx
import React from 'react';
import { Button } from 'animal-island-ui';

const App = () => {
    return (
        <div>
            {/* Primary */}
            <Button type="primary">Primary</Button>
            {/* Default */}
            <Button>Default</Button>
            {/* Dashed */}
            <Button type="dashed">Dashed</Button>
            {/* Text */}
            <Button type="text">Text</Button>
            {/* Link */}
            <Button type="link">Link</Button>
            {/* Danger */}
            <Button type="primary" danger>Danger</Button>
            {/* Ghost */}
            <Button type="primary" ghost>Ghost</Button>
            {/* Loading */}
            <Button type="primary" loading>Loading</Button>
            {/* Large */}
            <Button type="primary" size="large">Large</Button>
            {/* Icon */}
            <Button type="primary" icon={<span>🔍</span>}>搜索</Button>
            {/* Block */}
            <Button type="primary" block>Block</Button>
        </div>
    );
};

export default App;
```

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

### Button Component API

Source: https://guokaigdg.github.io/animal-island-ui/#/button

API documentation for the Button component, outlining its properties, types, and default values.

```APIDOC
## Button Component API

### Description
Provides details on the properties available for the Button component.

### Properties

| Property | Description | Type | Default Value |
|---|---|---|---|
| type | Button type | 'primary' | 'default' | 'dashed' | 'text' | 'link' | 'default' |
| size | Button size | 'small' | 'middle' | 'large' | 'middle' |
| danger | Whether it is a danger button | boolean | false |
| ghost | Whether it is a ghost button (transparent background) | boolean | false |
| block | Whether it is a block button | boolean | false |
| loading | Loading state | boolean | false |
| disabled | Disabled state | boolean | false |
| icon | Icon for the button | ReactNode | - |
| htmlType | Native button type | 'submit' | 'reset' | 'button' | 'button' |
| children | Content of the button | ReactNode | - |
| className | Custom CSS class name | string | - |
| ... | Inherits React.ButtonHTMLAttributes | HTMLButtonElement | -
```
Tokens:
Raw