Components

Button

<Button />

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

import { Button, ButtonCSS, ButtonProps } from '@admin-bro/design-system'
See:

View Source admin-bro-design-system/src/atoms/button.tsx, line 243

Examples

Color variants

Size variants

Icons

State

Members

# constant ButtonCSS

Button CSS Styles which can be reused in another button-like component with styled-components

Usage:

import { ButtonCSS } from '@admin-bro/design-system'
import { Link } from 'react-router-dom'

const MyStyledLink = styled(Link)`
  ${ButtonCSS}
`

View Source admin-bro-design-system/src/atoms/button.tsx, line 123

Type Definitions

object

# ButtonProps

Prop Types of an Button component. Apart from those defined below it extends all ColorProps, SpaceProps and TypographyProps

Properties:
Name Type Attributes Description
... string <optional>

Other props from ColorProps, SpaceProps and TypographyProps

variant 'primary' | 'danger' | 'text' | 'success' | 'info' | 'secondary' <optional>

Button color variant

size 'sm' | 'lg' | 'icon' <optional>

Button size variant

rounded boolean <optional>

If button should be rounded

View Source admin-bro-design-system/src/atoms/button.tsx, line 261