Button

Button component to trigger an action

Usage

Variations

Default

Primary

Secondary

Danger

<Box flexDirection="row">
  <Box paddingRight={16} height={240} justifyContent="space-between">
    <Button color="default" title="Default" />
    <Button color="default" appearance="outline" title="Default" />
    <Button color="default" appearance="minimal" title="Default" />
    <Button color="default" appearance="primary" title="Default" isLoading />
  </Box>
  <Box paddingRight={16} height={240} justifyContent="space-between">
    <Button color="primary" title="Primary" />
    <Button color="primary" appearance="outline" title="Primary" />
    <Button color="primary" appearance="minimal" title="Primary" />
    <Button color="primary" appearance="primary" title="Primary" isLoading />
  </Box>
  <Box paddingRight={16} height={240} justifyContent="space-between">
    <Button color="secondary" title="Secondary" />
    <Button color="secondary" appearance="outline" title="Secondary" />
    <Button color="secondary" appearance="minimal" title="Secondary" />
    <Button
      color="secondary"
      appearance="primary"
      title="Secondary"
      isLoading
    />
  </Box>
  <Box paddingRight={16} height={240} justifyContent="space-between">
    <Button color="danger" title="Danger" />
    <Button color="danger" appearance="outline" title="Danger" />
    <Button color="danger" appearance="minimal" title="Danger" />
    <Button color="danger" appearance="primary" title="Danger" isLoading />
  </Box>
</Box>

<Box flexDirection="row">
  <Box paddingRight={16} height={240} justifyContent="space-between">
    <Button color="default" title="Default" />
    <Button color="default" appearance="outline" title="Default" />
    <Button color="default" appearance="minimal" title="Default" />
    <Button color="default" appearance="primary" title="Default" isLoading />
  </Box>
  <Box paddingRight={16} height={240} justifyContent="space-between">
    <Button color="primary" title="Primary" />
    <Button color="primary" appearance="outline" title="Primary" />
    <Button color="primary" appearance="minimal" title="Primary" />
    <Button color="primary" appearance="primary" title="Primary" isLoading />
  </Box>
  <Box paddingRight={16} height={240} justifyContent="space-between">
    <Button color="secondary" title="Secondary" />
    <Button color="secondary" appearance="outline" title="Secondary" />
    <Button color="secondary" appearance="minimal" title="Secondary" />
    <Button
      color="secondary"
      appearance="primary"
      title="Secondary"
      isLoading
    />
  </Box>
  <Box paddingRight={16} height={240} justifyContent="space-between">
    <Button color="danger" title="Danger" />
    <Button color="danger" appearance="outline" title="Danger" />
    <Button color="danger" appearance="minimal" title="Danger" />
    <Button color="danger" appearance="primary" title="Danger" isLoading />
  </Box>
</Box>

Sizes

Small

Medium

Large

<Box paddingBottom={16}>
  <Button title="Small" size="small" />
</Box>
<Box paddingBottom={16}>
  <Button title="Medium" size="medium" />
</Box>
<Box paddingBottom={16}>
  <Button title="Large" size="large" />
</Box>

<Box paddingBottom={16}>
  <Button title="Small" size="small" />
</Box>
<Box paddingBottom={16}>
  <Button title="Medium" size="medium" />
</Box>
<Box paddingBottom={16}>
  <Button title="Large" size="large" />
</Box>

Partial<{ touchable: overridewithstyle<buttonbaseprops, touchableprops, styleprop<viewstyle>>; title: overridewithstyle<buttonbaseprops, titleprops, style<textprops, textstyle>>; iconbefore: overridebase<...>; iconafter: overridebase<...>; loading: overridebase<...>; }> | undefined

title

Optionalstring

color

String | undefined

"default"

appearance

"primary" | "minimal" | "outline" | undefined

"primary"

size

Number | "small" | "medium" | "large" | undefined

"medium"

isLoading

Boolean | undefined

false

isDisabled

Boolean | undefined

false

onPress

((event: gestureresponderevent) => void) | undefined

testID

String | undefined

Overrides

export interface ButtonOverrides {
  Touchable: TouchableProps;
  Title: TitleProps;
  IconBefore: IconProps;
  IconAfter: IconProps;
  Loading: LoadingProps;
}

Button

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Usage

Variations

Sizes

Props

Overrides

Usage