ITP Basic React Button 🎁

Why is this a separate package? I can just define <button> inside my project?

• We need a standard implementation to build upon and to share across projects
• Built-in types
• Built-in tests (todo)
• Built-in loading styling
• Built-in fallback on href prop to <a> element
• Built-in spacing between icons, text and other children of button
• Built-in A11Y (WAI-ARIA roles and attributes)
• Built-in ButtonGroup

API

Inspired by ant-design button with stripped styling, shares the same API.

Custom API

| Property | Description | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------- | -------- | --------- | | block | block state | Boolean | false | | color | can be set to primary secondary tertiary or omitted | string | - | | ghost | ghost state | Boolean | false | | htmlType | 'submit', 'button' or 'reset' | string | 'button' | | loading | loading state | Boolean | false | | onClick | onClick handler | Function | () => {} | | prefixCls | prefix css class name | string | '' | | shape | 'circle' or 'circle-outline' | string | null | | size | 'default', 'small' or 'large' | string | null | | styles | imported css module (if passed, prefixed classNames will be disabled), see styles property | object | null | | type | 'default', 'primary', 'ghost', 'dashed' or 'danger' | string | 'default' |

Styles property

| Property | Description | Type | Default | Required | | ------------------ | -------------------------------------------------------- | ------ | ------- | -------- | | backgroundGhost | | string | - | No | | block | | string | - | No | | button | | string | - | Yes | | colorPrimary | | string | - | No | | colorSecondary | | string | - | No | | colorTertiary | | string | - | No | | loading | | string | - | No | | shapeCircle | | string | - | No | | shapeCircleOutline | | string | - | No | | sizeLarge | | string | - | No | | sizeSmall | | string | - | No | | typeDanger | | string | - | No | | typeDashed | | string | - | No | | typeGhost | | string | - | No | | typePrimary | | string | - | No |

The css module should look like this:

.backgroundGhost { ... }
.block { ... }
.backgroundGhost { ... }
.block { ... }
.button: { ... },
.colorPrimary { ... }
.colorSecondary { ... }
.colorTertiary { ... }
.loading { ... }
.shapeCircle { ... }
.shapeCircleOutline { ... }
.sizeLarge { ... }
.sizeSmall { ... }
.typeDanger { ... }
.typeDashed { ... }
.typeGhost { ... }
.typePrimary { ... }