Common Type Definitions
BaseUIProps
The philosophy around this BaseUIProps is that almost all of the components extends this interface.
- status - To change the color appearance of the component
- primary
- accent
- success
- info
- warning
- error
- size - To control the size of the component
- small
- medium
- large
- mode - You will also see this prop in a significant amount of component, and this is based on the component modes, where you will be able to control the appearance & look/feel of the component
| Prop | Data Type | Default Value | Description |
|---|---|---|---|
| Extends | -- | -- | -- |
| status | BlossomStatus | primary | Status of the component to apply color variants'primary' | 'accent' | 'success' | 'info' | 'warning' | 'error' |
| size | BlossomSize | medium | Size of the component'small' | 'medium' | 'large' |
BaseBooleanFieldProps
| Prop | Data Type | Default Value | Description |
|---|---|---|---|
| Extends | BaseUIProps | -- | Inherits properties from BaseUIProps |
| position | "left" | "right" | right | Control the position of the field |
| adjacent | boolean | true | Set it to false to position them apart i.e. space-between |
| defaultValue | boolean | false | Default value for the field |
| disabled | boolean | -- | Set to true for disabled field |
| color | ColorValue | -- | Set custom color |
| label | string | -- | Label text above the input |
| caption | string | -- | Caption text below the text input |
| error | string | -- | Error text in error `status` below caption text |
| containerStyle | StyleProp<ViewStyle> | -- | Container view style |
| textFieldsContainerStyle | StyleProp<ViewStyle> | -- | Text field Container view styleContainer for label, caption & error i.e. the right/left section opposite to the boolean field |
| labelStyle | StyleProp<TextStyle> | -- | Label text style |
| captionStyle | StyleProp<TextStyle> | -- | Caption text style |
| errorStyle | StyleProp<TextStyle> | -- | Error text style |
| status | BlossomStatus | primary | Status of the component to apply color variants'primary' | 'accent' | 'success' | 'info' | 'warning' | 'error' |
| size | BlossomSize | medium | Size of the component'small' | 'medium' | 'large' |
| children | ReactNode | -- | Children |
BlossomUIOptions
| Prop | Data Type | Default Value | Description |
|---|---|---|---|
| Extends | -- | -- | -- |
| borderRadius | number | -- | Control the border radius for all components like input, button etc. |
| fontFamily | string | -- | Global font family applied to all text elements |
| typography | TypographyValues | b2 | Modify the font size/weight values using thish1-h6 are used for headings s1-s3 are used for subheadings b1-b3 are used for body text l1-l3 are used for labels c1-c3 are used for captions |