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 } from '@admin-bro/design-system'

// regular button
return (
  <Button>Click Me</Button>
)

// Passing button body as a label
return (
  <Button label="My Button" />
)

// create a new Component looking like button
const ButtonLikeComponent = styled.a`
  ${ButtonCSS};
`

return (
  <ButtonLikeComponent href="#">My styled link</ButtonLikeComponent>
)

Props

The Button Component takes 4 custom props:

variant
size
rounded
label

Apart from them you can also pass ColorProps, SpaceProps and TypographyProps. See ButtonProps below.

Examples

1 .Color variants

Size variants

Icons

State

See:

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

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/button-css.tsx, line 154

Type Definitions

Type: object

# ButtonProps

Prop Types of a 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`	VariantType \| 'text'	<optional>	Button color variant
`size`	'sm' \| 'lg' \| 'icon' \| 'default' \| 'md'	<optional>	Button size variant
`rounded`	boolean	<optional>	If button should be rounded
`label`	string	<optional>	You can either pass an label prop - or use react Children.

View Source admin-bro-design-system/src/atoms/button/button-props.ts, line 6

Button

<Button />