Components
Button

Button Variants

The Button component in sidcn supports various visual styles, or variants. Each variant comes with its own background color to provide a distinct look. Here's a detailed explanation of each variant:

HelloHello

Add Alert

npx sidcn add button

Reset Cache

yarn start --clear // yarn
 
npm start -- --reset-cache // npm

Import Button

The primary variant is designed for the main action or call-to-action buttons.

import { Button } from '/components/sidcn/ui/button'

Primary Variant

The primary variant is designed for the main action or call-to-action buttons.

<Button variant="primary" />

Background Color: #000000

Secondary Variant

The secondary variant is suitable for secondary actions or buttons with less emphasis.

<Button variant="secondary" />

Background Color: #f1f1f3

Destructive Variant

The destructive variant is ideal for buttons indicating potentially harmful actions.

<Button variant="destructive" />

Background Color: #d10e1d

Outline Variant

The outline variant provides a button with a transparent background and a visible border.

<Button variant="outline" />

Background Color: #fff

Link Variant

The link variant is suitable for text-like buttons, resembling hyperlinks.

<Button variant="link" />

Class Name

  • Applies Tailwind CSS classes to control both text and button style properties.

  • For the Button component, you can use Tailwind CSS classes that map to the following styles:

<Button
  variant="primary"
  className="px-8 my-4 border border-[#ff0000] text-[20px]"
  onPress={() => {}}
>
  Press Me
</Button>

Button Props

The Button component in sidcn accepts a variety of props to provide flexibility and customization. Here's an explanation of each prop:

Common Props

  • children?: React.ReactNode | undefined;

    • Content to be rendered inside the button.

  • disabled?: boolean | undefined;

    • If true, disables all interactions for this component.

  • style?: StyleProp<ViewStyle> | undefined;

    • Style object to customize the button's appearance.

  • testID?: string | undefined;

    • Used to locate this view in end-to-end tests.

Touch Handling Props

  • delayLongPress?: number | undefined;

    • Delay in milliseconds, from onPressIn, before onLongPress is called.

  • delayPressIn?: number | undefined;

    • Delay in milliseconds, from the start of the touch, before onPressIn is called.

  • delayPressOut?: number | undefined;

    • Delay in milliseconds, from the release of the touch, before onPressOut is called.

  • hitSlop?: null | Insets | number | undefined;

    • Defines how far your touch can start away from the button.

  • pressRetentionOffset?: null | Insets | number | undefined;

    • When the scroll view is disabled, this defines how far your touch may move off the button before deactivating the button.

Event Handling Props

  • onBlur?: ((e: NativeSyntheticEvent<{ TargetedEvent }>) => void) | undefined;

    • Invoked when the element loses focus.

  • onFocus?: ((e: NativeSyntheticEvent<{ TargetedEvent }>) => void) | undefined;

    • Invoked when the element gains focus.

  • onLayout?: ((event: LayoutChangeEvent) => void) | undefined;

    • Invoked on mount and layout changes with nativeEvent containing layout information.

  • onLongPress?: ((event: GestureResponderEvent) => void) | undefined;

    • Called when a long press gesture is detected.

  • onPress?: ((event: GestureResponderEvent) => void) | undefined;

    • Called when the touch is released, but not if cancelled.

  • onPressIn?: ((event: GestureResponderEvent) => void) | undefined;

    • Invoked when a touch is started.

  • onPressOut?: ((event: GestureResponderEvent) => void) | undefined;

    • Invoked when a touch is released, but not if cancelled.

These props provide fine-grained control over the button's behavior and appearance, allowing you to tailor the button to your specific requirements.

Bottom SheetCard