Optional backgroundbackgroundAttachment defines how a background image behaves in relation to the scrolling of content on the page.
The option for attaching the background image.
Example:
<backgroundAttachment="scrooll" />
Optional backgroundDefines how background layers blend with each other. It applies blending effects between multiple background images, gradients, or colors within the same element.
Example:
<View backgroundBlendMode="multiply" />
Optional backgroundThe background clip area.
Example:
<backgroundClip="border-box" />
Optional backgroundBackground color of component
Check the token table to know which values to use
Example:
<backgroundColor="background-color" />
Optional backgroundChange the background Image
Example:
<backgroundImage="myBoxShadow" />
Optional backgroundSets the origin of background positioning
Example:
<backgroundOrigin="border-box" />
Optional backgroundThe position of background
Example:
<backgroundPosition="center" />
Optional backgroundThe horizontal position of background
Example:
<backgroundPositionX="center" />
Optional backgroundThe vertical position of background
Example:
<backgroundPositionY="center" />
Optional backgroundAllows background repetition
Example:
<backgroundRepeat="repeat" />
Optional backgroundSets the background sizing
Example:
<backgroundSize="cover" />
Optional blockUsing the "block" option makes it a block instead of linear text.
Example:
<Text block={true}>
Optional borderBorder Color of component
Check the token table to know which values to use
Example:
<borderColor="neutral-900" />
Optional bottomA distance from the bottom.
Example:
<bottom={20} />
Optional boxEfeito de sombra
Example:
<boxShadow="myBoxShadow" />
Optional codeUsing the "code" option we can activate or disable the function code. This option don`t work with BBCode
Example:
<Text code>your code here</Text>
Optional colorText color of components
Check the token table to know which values to use
Example:
<color="neutral-900" />
Optional content"Use contrast colors for text and background"
Example:
<View contentColors backgroundColor="primary-500" />
Optional customFont size custom definition
Example:
<Text customFontSize="24px" />
Optional displayChanges the element exhibition
Example:
<display="flex"/>
Optional elevationAdjust elevation of component
Example:
<View elevation="low" ></View>
Optional filterSets a filter to image render.
Example:
<Image filter="sepia(60%)" />
Optional fontFont-family (require font configuration)
Example:
<fontFamily="default" />
Optional fontFont size definition by Design System
Example:
<Text fontSize="extra-small" />
Optional fontChanges font style
Example:
<fontStyle="normal" />
Optional fontChanges the font weight
Example:
<fontWeight="light" />
Optional heightAdjust component height
Example:
<height={100} />
Optional id"Fills the ID of the element (not very practical)."
Example:
<View id="id" />
Optional ignoreBBCodeUsing the "ignoreBBCode" option we can activate or disable the function BBCode.
Example:
<Text ignoreBBCode={false}>
Optional inlineUse the "inline" option to use Text inside Text.
Example:
<Text><Text inline>Danger</Text> zone</Text>
Optional leftA distance from the left.
Example:
<left={20} />
Optional letterChanges the letter spacing of text tag
Example:
<letterSpacing="quark" />
Optional lineControls how many lines for text-clamp
Optional lineChanges the line height of the text
Example:
<lineHeight="small" />
Optional marginGeneral margin size
Check the token table to know which values to use
Example:
<margin="quark" />
Optional marginBottom margin size
Check the token table to know which values to use
Example:
<marginBottom="quark" />
Optional marginHorizontal (left and right) margin size
Check the token table to know which values to use
Example:
<marginHorizontal="quark" />
Optional marginLeft margin size
Check the token table to know which values to use
Example:
<marginLeft="quark" />
Optional marginRight margin size
Check the token table to know which values to use
Example:
<marginRight="quark" />
Optional marginTop margin size
Check the token table to know which values to use
Example:
<marginTop="quark" />
Optional marginVertical (top and bottom) margin size
Check the token table to know which values to use
Example:
<marginVertical="quark" />
Optional maxAdjust component maximum height
Example:
<maxHeight={100} />
Optional maxAdjust component maximum width
Example:
<maxwidth={100} />
Optional minAdjust component minimum height
Example:
<minHeight={100} />
Optional minAdjust component minimum width
Example:
<minWidth={100} />
Optional mixDetermines how an element’s content blends with the background or elements behind it. It affects the entire element, including text and images, and creates effects similar to those in graphic design software.
Example:
<View mixBlendMode="screen" />
Optional objectSets the object fit
Example:
<objectFit="cover" />
Optional opacityChanges the element opacity
Example:
<opacity="light" />
Optional overflowThe overall overflow behavior.
Example:
<overflow="hidden" />
Optional overflowControls how word-breaks are handled.
Example:
<overflowWrap="normal" />
Optional overflowXThe horizontal overflow behavior.
Example:
<overflowX="hidden" />
Optional overflowYThe vertical overflow behavior.
Example:
<overflowY="hidden" />
Optional paddingGeneral padding size
Check the token table to know which values to use
Example:
<padding="quark" />
Optional paddingBottom padding size
Check the token table to know which values to use
Example:
<paddingBottom="quark" />
Optional paddingHorizontal (left and right) padding size
Check the token table to know which values to use
Example:
<paddingHorizontal="quark" />
Optional paddingLeft padding size
Check the token table to know which values to use
Example:
<paddingLeft="quark" />
Optional paddingRight padding size
Check the token table to know which values to use
Example:
<paddingRight="quark" />
Optional paddingTop padding size
Check the token table to know which values to use
Example:
<paddingTop="quark" />
Optional paddingVertical (top and bottom) padding size
Check the token table to know which values to use
Example:
<paddingVertical="quark" />
Optional positionThe element positioning.
Example:
<position="relative" />
Optional rightA distance from the right.
Example:
<right={20} />
Optional showThis property controls the display of scrollbars.
<View showScrollbars>
</View>
Optional textSets the type of alignment of text. (Works only with block property)
Example:
<textAlign="center" />
Optional textChanges text decoration
Example:
<textDecoration="none" />
Optional textChanges indentation of first line.
Example:
<textIdent="quark" />
Optional textChanges justify model of alignment
Example:
<textJustify="auto />
Optional textChanges text overflow
Example:
<textOverflow="clip" />
Optional textChanges the text render method
Example:
<textRendering="auto"/>
Optional textChanges text transformation
Example:
<textTransform="none" />
Optional topA distance from the top.
Example:
<top={20} />
Optional transform"Prepare a position transforming of element"
Example:
<View transform="rotate(45deg)" />
Optional transformThis option make a line break in the text when it reaches a "\n" character.
Optional transition"Prepare a transition of visual state change"
Example:
<View transition="background-color 0.5s ease-in-out" />
Optional variantThe variation of the text component.
The variant property defines the style variation of the text component. Each variant corresponds
to a specific typographic style, providing semantic meaning and visual hierarchy.
h1: Represents the largest heading size, typically used for main titles.h2: Represents a slightly smaller heading size, often used for section titles.h3: Represents a heading size smaller than h2, suitable for subsection titles.h4: Represents a heading size smaller than h3, commonly used for sub-subsection titles.h5: Represents a smaller heading size, suitable for minor headings.h6: Represents the smallest heading size, typically used for minor subsection titles.s1: Represents a subtitle text, commonly used for emphasized text.s2: Represents a smaller-subtitle text compared to s1, often used for less emphasized text.b1: Represents the base size for body text, providing good readability.b2: Represents a slightly smaller size compared to b1, suitable for secondary body text.bt: Represents the text size typically used for button labels.cp: Represents a smaller-sized text, suitable for captions or auxiliary information. <Text variant="h1">My header</Text>
Optional visibilityChanges the element visibility
Example:
<visibility="visible" />
Optional visual"Determines the visual state of the component and its children."
Example:
<View visualState="success" />
Optional whiteControls how white spaces (spaces, tabs, and line breaks) are handled.
Example:
<whiteSpaceValues="normal" />
Optional wideUsing the "wide" option makes it a block instead of linear text.
Example:
<Text wide={true}>
Optional widthAdjust component width
Example:
<width={100} />
Optional wordChanges the spacing size between words
Example:
<wordSpacing="quark" />
Optional zValue of z-index
Example:
<zIndex={1} />
Accepted values for the Text component.
Here's an example using some of the properties: