Button

Buttons allow users to perform actions within a surface. They can be used alone for immediate action. Also known as CTA (call to action).

Package: @terreno/ui
Categories: Component
Props interface: ButtonProps
Story source: demo/stories/Button.stories.tsx

Live demo

Live preview from the Terreno component demoOpen in playground ↗

Props

Prop	Type	Required	Description
onClick	reflection	Yes	The function to call when the button is clicked.
text	string	Yes	The text content of the button.
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	union		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	union		The size of the button.
testID	string		Root test id for the primary interactive element or container.
tooltipIdealPosition	TooltipPosition		The position of the tooltip.
tooltipIncludeArrow	boolean		Include an arrow in the tooltip. Pointing to the button.
tooltipText	string		The text content of the tooltip.
variant	union		The type of the button, which determines its style.
withConfirmation	boolean		If true, a confirmation modal will be shown before the onClick action.