Buttons make common actions immediately visible and easy to perform with one click or tap.
They can be used for any type of action.
### Usage
```jsx
import { Button, ButtonCSS } from '@adminjs/design-system'
// regular button
return (
)
// Passing button body as a label
return (
)
// create a new Component looking like button
const ButtonLikeComponent = styled.a`
${ButtonCSS};
`
return (
My styled link
)
```
### Props
The Button Component takes 4 custom props:
- `variant`
- `size`
- `rounded`
- `label`
Apart from them you can also pass {@link ColorProps}, {@link SpaceProps}
and {@link TypographyProps}. See {@link ButtonProps} below.
### Examples
1 .Color variants
```reactComponent
const variants = ['primary', 'danger', 'success', 'info', 'secondary', 'text', 'light']
return (
{variants.map(variant => (
))}
)
```
2. Size variants
```reactComponent
return (
)
```
3. Icons
```reactComponent
return (
)
```
4. State
```reactComponent
return (
)
```
Buttons make common actions immediately visible and easy to perform with one click or tap.
They can be used for any type of action.
### Usage
```jsx
import { Button, ButtonCSS } from '@adminjs/design-system'
// regular button
return (
)
// Passing button body as a label
return (
)
// create a new Component looking like button
const ButtonLikeComponent = styled.a`
${ButtonCSS};
`
return (