Action Card Opacity Feedback
Component used to communicate a numerical value or to indicate the status of an item to the user.
Children of the component
Style applied to the container
Style applied to the text
<Badge containerStyle={componentsDemoStyles.badge}>
Example
</Badge>
Displays words and characters at various sizes. The styles of text are based on figma tokens (size, color, font)
Size of the text. This can be s1, s2, s3, s4 or s5.
<BodyText
type="s4"
style={style}>
Text example
</BodyText>
Touchable element that when it is clicked, does a specific action. Color (primary or secondary) may change according to tokens.
Text displayed in the button
Type of the button, it can be 'primary', 'secondary', 'primaryText' or 'secondaryText'
If true, applies a shadow at the outline of the button
The component's container style
string | JSX.Element (optional)
Icon located to the left of the button
string | JSX.Element (optional)
Icon located to the right of the button
Style applied to the icon
ParamsTrackAnalytics (optional)
Analytics for the button component
Function called when the button is pressed
If true, disables all interactions for this component without the applying style
<Button
text="Button with Icon"
type="secondary"
disabled={false}
accessoryRight="arrow-up-circle"
containerStyle={style}
withShadow
onPress={() => null}
/>
Displays information, can contain content and actions about a single subject. Style may differ depending on parameter.
JSX.Element | JSX.Element[]
Children of the component
If true, applies a shadow at the outline of the card
The component's container style
Background color of the card
Radius for the border of the card
Function called when the card is pressed
If true, disables all interactions for this component
Analytics for the card component
<Card containerStyles={style} onPress={event}>
<View style={style}>
<BodyText type="s5" style={textStyle}>
{text}
</BodyText>
</View>
</Card>
Allows the user to complete a task that involves making choices such as selecting options.
Text displayed for the checkbox
Style applied to the checkbox
Style applied to the container
Style applied to the text
Handler called when the checkbox is pressed
JSX.Element | JSX.Element[]
Right icon for the checkbox
<Checkbox
boxType="square"
text="Checkbox text"
value={isCheckboxEnabled}
onValueChange={setIsCheckboxEnabled}
containerStyle={style}
/>
Displays words and characters at various sizes used as headings.
The HeadingTypes are 's1' | 's2' | 's3' | 's4'
<Heading type="s4">Example</Heading>
Component used to indicate which part or page of a process the user is currently on.
Color to display as the active indicator
Color to display as the inactive indicator
Index for the active indicator
Count of the where it is on the indicating process
<Indicator
count={indicatorsLength}
activeColor={theme.color.action.tertiary[400]}
inactiveColor={theme.color.action.tertiary[100]}
activeIndex={currentScreen}
/>
Allows users to enter text.
Style applied to the label
Style applied to the input
Style applied to the container
Style applied to the input container
If true, it will be a primary input
If true, success state will be triggered
If true, error state will be triggered
If true, disables interaction with the input
Name of icon to the left of the input
Function called when accessory left is pressed
Name of icon to the right of the input
Function called when accessory right is pressed
Style applied to the icon
If true, input must be filled
Value to show for the input
String validation if the message needs formatting
Text to display as the message error
(error: string | null) => void
Function called when an error occurs
((text: string) => void) | undefined
Function called when the input's text changes
If true, the text input obscures the text entered so that sensitive text like passwords stay secure.
toggleEntryVisibilityOnLeftPress
If true, the input entry will be visible on left press
toggleEntryVisibilityOnRightPress
If true, the input entry will be visible on right press
Function that is called when text input ends
Color of the placeholder string
If true, the input will be a date picker
If true, a clean button will be rendered inside the input so it can be cleared
<Input
placeholder="Placeholder Text"
label="Label Text"
containerStyle={style}
accessoryLeft="home"
onAccessoryLeftPress={() => console.log('Hello!')}
canClean={false}
/>
Displays a loading indicator.
The component's container style
Source for the lottie that is going to be used as loader
<Loader
containerStyle={componentsDemoStyles.loaderLottie}
lottieSource="lottie source"
/>
Allows the user to complete a task that involves making choices such as selecting options.
id given to the radio button
Text displayed in the radio button
Value of the radio button
Style applied to the radio button
Style applied to the text displayed
React.Dispatch<React.SetStateAction<string | null>>
Used to set the value of the radio button
({id, text}: OptionRadioButton) => void
Function to execute on press
<RadioButton
key={id}
selectedValue={selectedValue}
setSelectedValue={setSelectedValue}
radioButtonStyle={radioButtonStyle}
textStyle={textStyle}
{...radioButton}
onPress={onPress}
/>
A boolean control component which sets its value to true or false when pressed.
This props extend the React Native SwitchPropsRN
All props are optional.
Color of the foreground switch grip
Custom colors for the switch track.
The value of the switch. If true, the switch will be turned on. Default value is false.
Invoked when the user tries to change the value of the switch. Receives the new value as an argument.
Disables interaction for the component
Background of the switch. Only available on iOS.
<Switch
onValueChange={setIsDisabled}
value={isDisabled}
style={componentsDemoStyles.marginBottom}
/>
.svg?alt=media&token=c60e81e6-8682-4fb3-a1a1-aad243a1ccb8)
.svg?alt=media&token=fcdc007f-4d99-47c6-a4c3-bf635efbf676)
.svg?alt=media&token=d8d79f83-8514-4445-8fdb-fb561f46bec1)
