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.

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.secondary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.tertiary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

3. Size

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

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

ButtonIcon(
onClick = { },
size = IconButtonSize.md,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

ButtonIcon(
onClick = { },
size = IconButtonSize.sm,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

ButtonIcon(
onClick = { },
size = IconButtonSize.xs,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

4. State

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

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop),
state = ButtonIconState.disabled
)

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.secondary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop),
state = ButtonIconState.disabled
)

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.tertiary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop),
state = ButtonIconState.disabled
)

Preview

Code

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-12">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-lg">
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
    </div>
  )
}

Copy

Installation

Use this command to install the component in your project.

pnpm dlx shadcn@latest add alert

Copy

Usage

Add this code example to your project to see how the component works.

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

Copy

<Alert variant="default | destructive">
  <Terminal />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Copy

Examples

Variants

Preview

Code

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-12">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-lg">
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
    </div>
  )
}

Copy

Size

Preview

Code

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-12">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-lg">
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
    </div>
  )
}

Copy

Disabled

Preview

Code

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-12">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-lg">
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
    </div>
  )
}

Copy

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