Live example
Properties
Button
|
Name |
Values |
Default |
|---|---|---|
|
variant |
'surface' | 'destructive' | 'outline' | 'outline-variant' |
surface |
|
fullWidth |
boolean |
false |
|
iconLeft |
IconName | undefined |
|
|
iconRight |
IconName | undefined |
|
|
inverted |
boolean |
false |
|
size |
'default' | 'large' | 'small' |
'default' |
|
... |
JSX.IntrinsicElements["button"] |
|
Link
Displays as a button, but functions as an anchor link.
All button properties +
|
Name |
Values |
Default |
|---|---|---|
|
variant |
'surface' | 'destructive' | 'outline' | 'outline-variant' |
'surface' |
|
fullWidth |
boolean | undefined |
|
|
iconRight |
string |
'off' |
|
iconLeft |
string |
'off' |
|
inline |
boolean |
false |
|
className |
string | undefined |
|
|
href |
string | undefined |
|
|
opensInNewWindow |
boolean | undefined |
|
|
rel |
string | undefined |
|
|
children |
ReactNode |
|
|
... e.g. target… |
JSX.IntrinsicElements["a"] HTMLAttributeAnchorTarget |
|
Native Properties
Button
|
Name |
Values |
Default |
|---|---|---|
|
ref |
Ref<TouchableOpacity> |
|
|
iconLeft |
IconName |
|
|
iconRight |
IconName |
|
|
fullWidth |
boolean |
false |
|
variant |
'surface' | 'destructive' | 'outline' | 'outline-variant' |
'surface' |
|
inverted |
boolean |
false |
|
size |
'default' | 'large' | 'small' |
'default' |
|
children |
ReactNode |
|
|
… |
PropsWithChildren<TouchableOpacityProps> |
|
Link (appears as button, functions as link)
|
Name |
Values |
Default |
|---|---|---|
|
ref |
Ref<TouchableOpacity> |
|
|
… |
Omit<ComponentProps<typeof Button> |
|
Implementation
A button should be used to allow people to complete an action on the current page, or to allow them to submit information. Examples of this may be:
- Submitting a form
- Deleting previously saved information
- Opening a modal
A link should be used to allow people to navigate elsewhere. Examples of this may be:
- Navigating to a piece of important information (either in the same page, or a different page)
- Used within a card component to navigate to relevant information
Composition
- Text
- Icon right
- Icon left
- Icon
|
Tokens |
|
|---|---|
|
Background colour - Solid |
button.surface.color.bg |
|
Background colour - Solid inverted |
button.surface.color.bgInverted |
|
Border colour - Outline |
button.surface.color.bg |
|
Border colour - Outline inverted |
button.surface.color.bgInverted |
|
Border colour - Outline variant |
button.surface.color.bgVariant |
|
Text and icon colour - Solid, outline inverted |
button.surface.color.fg |
|
Text and icon colour - Solid inverted, outline, outline inverted |
button.surface.color.fgInverted |
|
Border radius |
border.radius.3xl |
|
Border width - Outline, outline variant, outline inverted |
border.width.md |
|
Text font weight |
font.family.bold |
|
Text size - Small button |
font.size.sm |
|
Text size - Large button |
font.size.lg |
|
Text size - Regular button |
font.size.md |
|
Text line height - Small button |
font.lineheight.sm |
|
Text line height - Large button |
font.lineheight.lg |
|
Text line height - Regular button |
font.lineheight.md |
|
Padding |
space[100] space[300] space[400] space[500] |