[component]

Dev Mode
Button
Description
Buttons allow users to perform actions within a surface. They can be used alone for immediate action. Also known as CTA (call to action).
Variant
Icon Name
Icon Position
Full Width
Press Animation
State
With Confirmation
Size
Usage Guidelines
Do
Use to trigger an action or progression within a task or flow.
Use concise, descriptive language.
Use the primary style for the most important action on a page or section.
Use disabled buttons very sparingly.
Don't
Do not use a button to direct users to an anchor link. Instead, use a simple link.
Add multiple lines of text.
Use two icons in one button.
Accessibility
Use disabled buttons very rarely. Here’s an article with more details.
If the button text doesn’t provide sufficient context about a button’s behavior to a screen reader, provide a short descriptive label.
When Button text does not provide sufficient context about the Button’s behavior, supply a short, descriptive label for screen-readers using accessibilityLabel. Texts like 'Click here', 'Follow', or 'Shop' can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text with deeper context to replace the Button text, like 'Follow Ryan' or 'Shop Wedding Invitations'.
If Button is used as a control Button to show/hide a Popover-based , we recommend passing the following ARIA attributes to assist screen readers: accessibilityLabel, accessibilityControls, accessibilityHaspopup.
Props
Name
Type
Required
Description
onClick
Required
The function to call when the button is clicked.
text
string
Required
The text content of the button.
accessibilityLabel
string
Accessible name. Defaults to
confirmationText
string
The text content of the confirmation modal.
disabled
boolean
If true, the button will be disabled.
fullWidth
boolean
If true, the button will take the full width of its container.
iconName
IconName
The name of the icon to display in the button.
iconPosition
The position of the icon within the button.
loading
boolean
If true, a loading spinner will be shown in the button.
modalSubTitle
string
The subtitle of the confirmation modal.
modalTitle
string
The title of the confirmation modal.
pressAnimation
ButtonPressAnimation
The press animation to use when the button is touched.
size
The size of the button.
state
Controls the button's interaction state. Use Default for standard button appearance and Active to indicate a selected or currently engaged state.
testID
string
Root test id for the primary interactive element or container.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
NN/g article
Related
Cards, Modals, Table icon buttons
Examples
Variants
Disabled Variants
States
Primary
Default
Active
Secondary
Default
Active
Outline
Default
Active
Muted
Default
Active
Destructive
Default
Active
Ghost
Default
Active
Sizes
Default size
Small (sm)
IconPosition
Loading
Confirmation
FullWidth
Column Layout - default width
Column Layout - fullWidth
Row Layout - default width
Row Layout - fullWidth
PressAnimations
Pressto press animations
Press each row to compare Pressto animations across every button variant.
Scale
Pressto PressableScale compresses the button while pressed.
Opacity
Pressto PressableOpacity fades the button while pressed.
None
Pressto PressableWithoutFeedback keeps behavior without visual motion.
Multiline