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 blockSet to true to make the button width expand full width.
Example:
<Button block label="A block button" />
Optional borderborderColor sets the color of borders in the design system, allowing you to control the visual appearance of elements' outlines.
Check the token table to know which values to use
Example:
<borderColor="neutral-900" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderBottomWidth focuses on adjusting the thickness of the bottom border in the design system, allowing you to fine-tune the visual appearance of the bottom border for elements.
Check the token table to know which values to use
Example:
<borderBottomWidth="hairline" />
Optional borderBorder Color of component
Check the token table to know which values to use
Example:
<borderColor="neutral-900" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderBottomWidth is used to control the thickness of the bottom border in the design system, giving you control over the visual appearance of the bottom edges of elements.
Check the token table to know which values to use
Example:
<borderBottomWidth="hairline" />
Optional borderborderRadius defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadius="micro" />
Optional borderborderRadiusLeftBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusLeftBottom="micro" />
Optional borderborderRadiusLeftTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusLeftTop="micro" />
Optional borderborderRadiusRightBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusRightBottom="micro" />
Optional borderborderRadiusRightTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusRightTop="micro" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderRightWidth is used to control the thickness of the right border in the design system, giving you control over the visual appearance of the right edges of elements.
Check the token table to know which values to use
Example:
<borderRightWidth="hairline" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderTopWidth specifically adjusts the thickness of the top border in the design system, giving you precise control over the visual aspect of the top border of elements.
Check the token table to know which values to use
Example:
<borderTopWidth="hairline" />
Optional borderThe borderWidth determines the thickness of borders in the design system.
It's a crucial property for defining the visual weight of elements.
Check the token table to know which values to use
Example:
<borderWidth="hairline" />
Optional boxEfeito de sombra
Example:
<boxShadow="myBoxShadow" />
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 disabledSet to true to make the button inactive.
Example:
<Button disabled label="An inactive button" />
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 id"Fills the ID of the element (not very practical)."
Example:
<View id="id" />
Optional labelText displayed inside the button.
Example:
<Button label="My Button" />
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 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 onFunction to be executed when the button is pressed.
Example:
<Button
label="Touch me"
onPress={() => { console.log("Hello world") }}
/>
Optional opacityChanges the element opacity
Example:
<opacity="light" />
Optional overflowControls how word-breaks are handled.
Example:
<overflowWrap="normal" />
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 sizeUse small for a smaller button
Example:
<Button size="small" label="A small button" />
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 transform"Prepare a position transforming of element"
Example:
<View transform="rotate(45deg)" />
Optional transition"Prepare a transition of visual state change"
Example:
<View transition="background-color 0.5s ease-in-out" />
Optional variantVisual variations of the button.
Solid is a common surface button Ghost is deprecated Outlined is for outlined button Text is only text, but with same dimensions
Example:
<Button variant="ghost" label="A ghost button" />
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 wideSet to true to make the button width expand.
Example:
<Button wide label="A wide button" />
Optional wordChanges the spacing size between words
Example:
<wordSpacing="quark" />
These are the accepted values as properties of the Button component.
Here's an example using some of the properties: