Glowup
ACTIONS · 11 / 89
Button
Button — a Material You actions component for React Native and web.
󱀫
packages/ui/src/components/Button.tsx
Live demo
Properties
7 controls
Label
Mode
Filled
󰍝
Icon Name
Icon Position
Left
󰍝
Full Width
Disabled
Loading
Usage
Button.tsx
<Button> Click Me </Button>
Variants
The states and shapes this component is meant to be used in.
Modes
With icons
States
Full width
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
19 on ButtonProps
Filter props
󰍉
accessibilityHint
string
accessibilityLabel
string
busy
boolean
default: false
Blocks presses and announces the button as busy, but — unlike `loading` — keeps the label, the icon and the full-strength colours on screen.
children
React.ReactNode
disabled
boolean
default: false
feedback
boolean
default: true
Report the press to `ThemeProvider`'s `onInteractionFeedback` (haptics). Defaults to true.
fullWidth
boolean
default: false
Stretch to fill the parent width.
iconName
MaterialCommunityIconsGlyphs
iconPosition
"left" | "right"
default: "left"
Icon side relative to the label.
iconStyle
object
default: {}
labelStyle
StyleProp<TextStyle>
Applied to the label text, after the theme's type style.
loading
boolean
default: false
mode
ButtonMode
default: "filled"
onPress
() => void
size
number
style
object
default: {}
testID
string
tone
ButtonTone
default: "primary"
Colour role. `error` is the destructive treatment (delete, discard); `success` is confirmation feedback, from a fixed green kept off the seed.
underlay
React.ReactNode
Drawn behind the label across the whole surface, clipped to its shape: a progress fill, a state animation. It receives no touches.