The Button Icon is a customizable component designed to display a mini, small, medium or large button icon with different styles and background colors.

1. Reference

This component inherits props from the Button Icon.

Prop

Type

Default

type

primary

secondary

tertiary

primary

state

default

pressed

disabled

default

size

2. Type

You can edit the type with the primary, secondary or tertiary parameter.

Image 2.1 : Type primary

Image 2.2 : Type secondary

Image 2.3 : Type tertiary

3. State

You can edit the state with the default, pressed or disabled parameter.

Image 3.1 : State default

Image 3.2 : State pressed

Image 3.3 : State disabled

4. Size

You can edit the size with the lg, md, sm or xs parameter.

Image 4.1 : Size lg

Image 4.2 : Size md

Image 4.3 : Size sm

Image 4.4 : Size xs

SwiftUI

The DLButtonIcon component provides a flexible, customizable button with an icon-only design. It supports different sizes, styles, and states, making it suitable for a wide variety of use cases.

1. Reference

This component inherits props from the Button Icon.

Prop

Type

Default

type

.primary

.secondary

.tertiary

.primary

icon

"icon"

size

.xs

.sm

.md

.lg

state

.normal

.disabled

.normal

action

2. Type

You can edit the type with the .primary, .secondary or .tertiary parameter.

DLButtonIcon(
type: .primary,
size: .lg,
icon: "ic_Placeholder"
)

DLButtonIconn(
type: .secondary,
size: .lg,
icon: "ic_Placeholder"
)

DLButtonIcon(
type: .tertiary,
size: .lg,
icon: "ic_Placeholder"
)

3. Size

You can edit the size with the .xs, .sm, .md or .lg parameter.

DLButtonIcon(
type: .primary,
size: .lg,
icon: "ic_Placeholder"
)

DLButtonIcon(
type: .primary,
size: .md,
icon: "ic_Placeholder"
)

DLButtonIcon(
type: .primary,
size: .sm,
icon: "ic_Placeholder"
)

DLButtonIcon(
type: .primary,
size: .xs,
icon: "ic_Placeholder"
)

4. State

You can edit the state state with .normal or .disabled parameter

DLButtonIcon(
type: .primary,
size: .lg,
icon: "ic_Placeholder",
state: .disabled
)

DLButtonIcon(
type: .secondary,
size: .lg,
icon: "ic_Placeholder",
state: .disabled
)

DLButtonIcon(
type: .tertiary,
size: .lg,
icon: "ic_Placeholder",
state: .disabled
)

Jetpack Compose

The ButtonIcon component provides a flexible, customizable button with an icon-only design. It supports different sizes, styles, and states, making it suitable for a wide variety of use cases.

1. Reference

This component inherits props from the Button Icon.

Prop

Type

Default

type

ButtonIconType.primary

ButtonIconType.secondary

ButtonIconType.tertiary

ButtonIconType.primary

icon

"icon"

size

ButtonIconSize.xs

ButtonIconSize.sm

ButtonIconSize.md

ButtonIconSize.lg

state

ButtonIconState.default

ButtonIconState.disabled

ButtonIconState.default

action

2. Type

You can edit the type with the ButtonIconType.primary, ButtonIconType.secondary or ButtonIconType.tertiary parameter.

...

3. Size

You can edit the size with the ButtonIconSize.xs, ButtonIconSize.sm, ButtonIconSize.md or ButtonIconSize.lg parameter.

...

4. State

You can edit the state state with ButtonIconState.default or ButtonIconState.disabled parameter

...

React Native

The CustomButtonIcon component provides a flexible, customizable button with an icon-only design. It supports different sizes, styles, and states, making it suitable for a wide variety of use cases.

1. Reference

This component inherits props from the Button Icon.

Prop

Type

Default

type

primary

secondary

tertiary

primary

icon

"icon"

size

state

default

disabled

default

2. Type

You can edit the type with the primary, secondary or tertiary parameter.

import { View } from 'react-native';
import CustomButtonIcon from '../../components/common/CustomButtonIcon';
‍
export default function ScreenName() {
return (
<View>
‍
<CustomButtonIcon
icon={<CustomIcon fill={colors.white}/>}
type={"primary"}
/>

<CustomButtonIcon
icon={<CustomIcon fill={colors.white} />}
type={"secondary"}
/>

<CustomButtonIcon
icon={<CustomIcon fill={colors.white} />}
type={"tertiary"}
/>

</View>
);
}

3. Size

You can edit the size with the xs, sm, md or lg parameter.

import { View } from 'react-native';
import CustomButtonIcon from '../../components/common/CustomButtonIcon';

export default function ScreenName() {
return (
<View>

<CustomButtonIcon
icon={<CustomIcon fill={colors.white} />}
type={"primary"}
size={lg}
/>

<CustomButtonIcon
icon={<CustomIcon fill={colors.white} />}
type={"secondary"}
size={md}
/>

<CustomButtonIcon
icon={<CustomIcon fill={colors.white} />}
type={"tertiary"}
size={sm}
/>

<CustomButtonIcon
icon={<CustomIcon fill={colors.white} />}
type={"tertiary"}
size={xs}
/>

</View>
);
}

4. State

You can edit the state state with default or disabled parameter.

import { View } from 'react-native';
import CustomButtonIcon from '../../components/common/CustomButtonIcon';

export default function ScreenName() {
return (
<View>

<CustomButtonIcon
icon={<CustomIcon fill={colors.white} />}
type={"primary"}
disabled={"disabled"}
/>

<CustomButtonIcon
icon={<CustomIcon fill={colors.white} />}
type={"secondary"}
state={"disabled"}
/>

<CustomButtonIcon
icon={<CustomIcon fill={colors.white} />}
type={"tertiary"}
state={"disabled"}
/>

</View>
);
}

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version