Button
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The Button is a customizable component designed to display a mini, small, medium or large button with different styles and background colors.
1. Reference
This component inherits props from the Button.
-
2. Type
You can edit the type with the primary, secondary, tertiary or ghost parameter.
Image 2.1 : Type primary
Image 2.2 : Type secondary
Image 2.3 : Type tertiary
Image 2.4 : Type ghost
3. Size
You can edit the size with the xs, sm, md or lg parameter.
Image 3.1 : Size lg
Image 3.2 : Size md
Image 3.3 : Size sm
Image 3.4 : Size xs
4. State
You can edit the state with the default, pressed, active and disabled parameter.
Image 4.1 : State default
Image 4.2 : State pressed
Image 4.3 : State active
Image 4.4 : State disabled
5. iconLeft
You can edit the iconLeft with the true or false parameter.
Image 5.1 : iconLeft false
Image 5.2 : iconLeft true
6. iconRight
You can edit the iconRight with the true or false parameter.
Image 6.1 : iconRight false
Image 4.2 : iconRight true
SwiftUI
The DLButton is a highly customizable button component in SwiftUI, supporting various sizes, styles, and actions for easy integration into your app's UI.
1. Reference
This component inherits props from the Button.
-
-
-
-
-
2. Type
You can edit the type with the .primary, .secondary, .tertiary or .ghost parameter.
size: .lg,
type: .primary,
label: "Button",
icon: ("", "")
)
DLButton(
size: .lg,
type: .secondary,
label: "Button",
icon: ("", "")
)
DLButton(
size: .lg,
type: .tertiary,
label: "Button",
icon: ("", "")
)
DLButton(
size: .lg,
type: .ghost,
label: "Button",
icon: ("", "")
)
3. Size
You can edit the size with the .xs, .sm, .md or .lg parameter.
size: .lg,
type: .primary,
label: "Button",
icon: ("", "")
)
DLButton(
size: .md,
type: .secondary,
label: "Button",
icon: ("", "")
)
DLButton(
size: .sm,
type: .tertiary,
label: "Button",
icon: ("", "")
)
DLButton(
size: .xs,
type: .ghost,
label: "Button",
icon: ("", "")
)
4. State
You can edit the state state with .normal or .disabled parameter.
size: .lg,
type: .primary,
label: "Button",
state: .disabled,
icon: ("", "")
)
DLButton(
size: .lg,
type: .secondary,
label: "Button",
state: .disabled,
icon: ("", "")
)
DLButton(
size: .lg,
type: .tertiary,
label: "Button",
state: .disabled,
icon: ("", "")
)
DLButton(
size: .lg,
type: .ghost,
label: "Button",
state: .disabled,
icon: ("", "")
)
5. Icon
You can edit the icon with the "icon" parameter.
size: .lg,
type: .primary,
label: "Button",
icon: ("ic_Placeholder", "")
)
DLButton(
size: .lg,
type: .primary,
label: "Button",
icon: ("", "ic_Placeholder")
)
Jetpack Compose
The Button is a highly customizable button component in Kotlin, supporting various sizes, styles, and actions for easy integration into your app's UI.
1. Reference
This component inherits props from the Button.
-
-
-
-
-
2. Type
You can edit the type with the ButtonType.primary, ButtonType.secondary, ButtonType.tertiary or ButtonType.ghost parameter.
label = "Button",
size = ButtonSize.lg,
type = ButtonType.primary,
onClick = { }
)
Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.secondary,
onClick = { }
)
Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.tertiary,
onClick = { }
)
Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.ghost,
onClick = { }
)
3. Size
You can edit the size with the .xs, .sm, .md or .lg parameter.
label = "Button",
size = ButtonSize.lg,
type = ButtonType.primary,
onClick = { }
)
Button(
label = "Button",
size = ButtonSize.md,
type = ButtonType.primary,
onClick = { }
)
Button(
label = "Button",
size = ButtonSize.sm,
type = ButtonType.primary,
onClick = { }
)
Button(
label = "Button",
size = ButtonSize.xs,
type = ButtonType.primary,
onClick = { }
)
4. State
You can edit the state state with ButtonState.default or ButtonState.disabled parameter.
label = "Button",
size = lg,
type = ButtonType.primary,
state = ButtonState.disabled,
onClick = { }
)
Button(
label = "Button",
size = lg,
type = ButtonType.secondary,
state = ButtonState.disabled,
onClick = { }
)
Button(
label = "Button",
size = lg,
type = ButtonType.tertiary,
state = ButtonState.disabled,
onClick = { }
)
Button(
label = "Button",
size = lg,
type = ButtonType.ghost,
state = ButtonState.disabled,
onClick = { }
)
5. Icon
You can edit the iconLeft and iconRight with the ButtonIcon parameter.
label = "Button",
size = ButtonSize.lg,
type = ButtonType.primary,
iconLeft = ButtonIcon.Drawable(R.drawable.ic_crop),
onClick = { }
)
Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.primary,
iconRight = ButtonIcon.Drawable(R.drawable.ic_crop),
onClick = { }
)
React Native
The CustomButton is a highly customizable button component in React Native, supporting various sizes, styles, and actions for easy integration into your app's UI.
1. Reference
This component inherits props from the Button.
-
-
-
-
-
2. Type
You can edit the type with the primary, secondary, tertiary or ghost parameter.
import CustomButton from '../../components/common/CustomButton';
export default function ScreenName() {
return(
<View>
<CustomButton
text={"Primary"}
type={"primary"}
/>
<CustomButton
text={"Secondary"}
type={"secondary"}
/>
<CustomButton
text={"Tertiary"}
type={"tertiary"}
/>
<CustomButton
text={"Ghost"}
type={"ghost"}
/>
</View>
);
}
3. Size
You can edit the size with the xs, sm, md or lg parameter.
import CustomButton from '../../components/common/CustomButton';
export default function ScreenName() {
return (
<View>
<CustomButton
text={"Button"}
type={"primary"}
size={lg} // default size is lg
/>
<CustomButton
text={"Button"}
type={"primary"}
size={md}
/>
<CustomButton
text={"Button"}
type={"primary"}
size={sm}
/>
<CustomButton
text={"Button"}
type={"primary"}
size={xs}
/>
</View>
);
}
4. State
You can edit the state state with default or disabled parameter.
import CustomButton from '../../components/common/CustomButton';
export default function ScreenName() {
return (
<View>
<CustomButton
text={"Button"}
type={"primary"}
state={"default"}
/>
<CustomButton
text={"Button"}
type={"primary"}
state={"disabled"}
/>
</View>
);
}
5. Icon
You can edit the iconLeft and iconRight with the Icon parameter.
import CustomButton from '../../components/common/CustomButton';
import CustomIcon from '../../../assets/icons/svg_js/customIcon';
export default function ScreenName() {
return (
<View>
<CustomButton
text={"Button"}
type={"primary"}
iconLeft={<CustomIcon fill={colors.white} />}
/>
<CustomButton
text={"Button"}
type={"primary"}
iconRight={<CustomIcon fill={colors.white} />}
/>
</View>
);
}
6. on Press
You can edit the onPress parameter.
import CustomButton from '../../components/common/CustomButton';
export default function ScreenName() {
return (
<View>
<CustomButton
text={"Button"}
type={"primary"}
onPress={() => console.log("Primary Button Pressed")}
/>
</View>
);
}
7. Scaling
You can edit the scaling with the full or auto parameter.
import CustomButton from '../../components/common/CustomButton';
export default function ScreenName() {
return (
<View>
<CustomButton
text={"Button"}
type={"primary"}
scaling={"full"}
/>
<CustomButton
text={"Button"}
type={"primary"}
scaling={"auto"}
/>
</View>
);
}
Discover more content
You have questions or need help?
You want to try?
Save time and money?