Badge

New version v0.0.1 🚀

Interactive Badge for Phoenix LiveView supports icons, and indicators, making it ideal for real-time notifications, status updates in your web app.

Installation:

mix mishka.ui.gen.component badge

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS-module

Overview of the Phoenix and LiveView Badge Component

The Mishka Chelekom Badge module offers a versatile selection of badge components designed for Phoenix applications. Whether you need badges in different sizes, colors, or styles, this module makes it easy to tailor them to your project’s needs. With support for badges featuring icons and indicators, it provides a flexible solution for adding interactive and informative elements to your interface. The Phoenix LiveView Component gives developers even more creative freedom, offering a variety of colors and shapes that seamlessly blend with any design. Its versatility boosts user engagement and ensures a visually appealing, polished user experience.

The Mishka Chelekom Badge module offers versatile options for Phoenix LiveView projects. From displaying notifications to showcasing status updates and labels, it allows you to incorporate icons and interactive elements easily. Its flexibility ensures smooth integration, making it an ideal choice for enhancing both design and functionality in your application.

Default variant of Phoenix and LiveView badge component

The Mishka Chelekom badge comes with a default variant that automatically applies a solid background and border. The variant="default" is applied by default, so there's no need to specify it. You can easily customize the badge by using the color prop to select from a wide range of colors, making it a perfect choice for adapting to any design or interface.

Natural

White

Dark

Primary

Secondary

Success

Warning

Danger

Info

Silver

Misc

Dawn

<.badge>Natural</.badge>

<.badge color="white">White</.badge>

<.badge color="dark">Dark</.badge>

<.badge color="primary">Primary</.badge>

<.badge color="secondary">Secondary</.badge>

<.badge color="success">Success</.badge>

<.badge color="warning">Warning</.badge>

<.badge color="danger">Danger</.badge>

<.badge color="info">Info</.badge>

<.badge color="silver">Silver</.badge>

<.badge color="misc">Misc</.badge>

<.badge color="dawn">Dawn</.badge>

Outline variant of badge component

The variant="outline" prop gives the badge a transparent background with a colored border, available in various shades.

Natural

Primary

Secondary

Success

Warning

Danger

Info

Silver

Misc

Dawn

<.badge variant="outline">Natural</.badge>

<.badge variant="outline" color="primary">Primary</.badge>

<.badge variant="outline" color="secondary">Secondary</.badge>

<.badge variant="outline" color="success">Success</.badge>

<.badge variant="outline" color="warning">Warning</.badge>

<.badge variant="outline" color="danger">Danger</.badge>

<.badge variant="outline" color="info">Info</.badge>

<.badge variant="outline" color="silver">Silver</.badge>

<.badge variant="outline" color="misc">Misc</.badge>

<.badge variant="outline" color="dawn">Dawn</.badge>

Transparent variant of badge component

The variant="transparent" prop gives the badge a transparent background with a colored border, available in various shades.

Natural

Primary

Secondary

Success

Warning

Danger

Info

Silver

Misc

Dawn

<.badge variant="transparent">Natural</.badge>

<.badge variant="transparent" color="primary">Primary</.badge>

<.badge variant="transparent" color="secondary">Secondary</.badge>

<.badge variant="transparent" color="success">Success</.badge>

<.badge variant="transparent" color="warning">Warning</.badge>

<.badge variant="transparent" color="danger">Danger</.badge>

<.badge variant="transparent" color="info">Info</.badge>

<.badge variant="transparent" color="silver">Silver</.badge>

<.badge variant="transparent" color="misc">Misc</.badge>

<.badge variant="transparent" color="dawn">Dawn</.badge>

Bordered Variant

The Bordered variant of the Mishka Chelekom badge has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.

Natural

White

Dark

Primary

Secondary

Success

Warning

Danger

Info

Silver

Misc

Dawn

<.badge variant="bordered">Natural</.badge>

<.badge variant="bordered" color="white">White</.badge>

<.badge variant="bordered" color="dark">Dark</.badge>

<.badge variant="bordered" color="primary">Primary</.badge>

<.badge variant="bordered" color="secondary">Secondary</.badge>

<.badge variant="bordered" color="success">Success</.badge>

<.badge variant="bordered" color="warning">Warning</.badge>

<.badge variant="bordered" color="danger">Danger</.badge>

<.badge variant="bordered" color="info">Info</.badge>

<.badge variant="bordered" color="silver">Silver</.badge>

<.badge variant="bordered" color="misc">Misc</.badge>

<.badge variant="bordered" color="dawn">Dawn</.badge>

Gradient Variant

The gradient variant of the Mishka Chelekom badge has gradients in various colors.

Natural

Primary

Secondary

Success

Warning

Danger

Info

Silver

Misc

Dawn

<.badge variant="gradient">Natural</.badge>

<.badge variant="gradient" color="primary">Primary</.badge>

<.badge variant="gradient" color="secondary">Secondary</.badge>

<.badge variant="gradient" color="success">Success</.badge>

<.badge variant="gradient" color="warning">Warning</.badge>

<.badge variant="gradient" color="danger">Danger</.badge>

<.badge variant="gradient" color="info">Info</.badge>

<.badge variant="gradient" color="silver">Silver</.badge>

<.badge variant="gradient" color="misc">Misc</.badge>

<.badge variant="gradient" color="dawn">Dawn</.badge>

Shadow variant of badge component

The variant="shadow" prop gives the badge a solid background similar to the default variant but adds a subtle shadow, giving it a slightly elevated, more defined appearance.

Natural

Primary

Secondary

Success

Warning

Danger

Info

Silver

Misc

Dawn

<.badge variant="shadow">Natural</.badge>

<.badge variant="shadow" color="primary">Primary</.badge>

<.badge variant="shadow" color="secondary">Secondary</.badge>

<.badge variant="shadow" color="success">Success</.badge>

<.badge variant="shadow" color="warning">Warning</.badge>

<.badge variant="shadow" color="danger">Danger</.badge>

<.badge variant="shadow" color="info">Info</.badge>

<.badge variant="shadow" color="silver">Silver</.badge>

<.badge variant="shadow" color="misc">Misc</.badge>

<.badge variant="shadow" color="dawn">Dawn</.badge>

Dismiss prop in Phoenix LiveView Badge Component

The dismiss prop adds a closing icon to the badge, allowing it to be dismissed and removed from the DOM. It supports positions like right_dismiss and left_dismiss, and is a server-side component for dynamic interaction.

All components that have a dismiss button. When performing the operation, it sends an event to the server. for example


  handle_event("dismiss", params, socket)

Danger

Success

Warning

<!--How to use dismiss prop, each item should have id-->
<.badge id="badge-dismiss-1" dismiss>Primary</.badge>

<.badge id="badge-dismiss-2" right_dismiss>Secondary</.badge>

<.badge id="badge-dismiss-3" left_dismiss>Secondary</.badge>

When one of the dismiss items is activated in the badge, it is expected to send an event to the server. For example:

def handle_event("dismiss", params, socket) do
  {:noreply, socket}
end

Radius prop in Phoenix LiveView Badge Component

With the Mishka Chelekom badge component, you can easily customize the badge’s border radius using various size options. Available sizes include extra_small, small, medium, large, extra_large, full, and none, allowing you to adjust the roundness of the badge’s corners to suit your design. Whether you need sharp-edged labels or fully rounded badges, these options provide flexibility to enhance the appearance and functionality of your interface.

Extra Small

Small

Medium

Large

Extra Large

<.badge rounded="extra_small">Extra Small</.badge>

<.badge rounded="small">Small</.badge>

<.badge rounded="medium">Medium</.badge>

<.badge rounded="large">Large</.badge>

<.badge rounded="extra_large">Extra Large</.badge>

Border prop

With the Mishka Chelekom badge component, you can easily customize the border size using various options. Available sizes include extra_small, small, medium, large, extra_large and none, Note that these size options are only applicable to the outline variant.

Extra Small

Small

Medium

Large

Extra Large

<.badge variant="outline" border="extra_small">Extra Small</.badge>

<.badge variant="outline" border="small">Small</.badge>

<.badge variant="outline" border="medium">Medium</.badge>

<.badge variant="outline" border="large">Large</.badge>

<.badge variant="outline" border="extra_large">Extra Large</.badge>

Size prop

The size prop in the Mishka Chelekom badge controls both padding and text size. When circle is set to false, it adjusts the padding based on the size, ranging from extra_small to extra_large. If circle is true, it applies Tailwind size classes for circular badges. This prop also adjusts the indicator and text size, ensuring the badge fits seamlessly into any design.

Extra Small

Small

Medium

Large

Extra Large

<.badge icon="hero-bookmark" icon_class="size-4" />

<.badge icon="hero-plus">badge</.badge>

<.badge icon="hero-bell">badge</.badge>

<.badge icon="hero-magnifying-glass-circle-solid">badge</.badge>

<.badge icon="hero-play">badge</.badge>

Icon prop

The icon prop in the Mishka Chelekom badge component allows you to easily add icons next to the badge content, utilizing LiveView Hero Icons by default. With the icon_class prop, you can apply custom styles to the icon for better design control. By default, the icon appears on the left side, but you can customize the position using the right_icon or left_icon props, giving you more flexibility to create visually appealing and functional badge designs.

Down

Upload

badge

Notify

<.badge icon="hero-bookmark" icon_class="size-4" />

<.badge icon="hero-plus">badge</.badge>

<.badge icon="hero-bell">badge</.badge>

<.badge icon="hero-magnifying-glass-circle-solid">badge</.badge>

<.badge icon="hero-play">badge</.badge>

Indicator prop

The indicator prop in the Mishka Chelekom badge component allows you to display an indicator, typically a small circle, within the badge. You can control its placement using the indicator_position prop. By default, it appears on the left (left_indicator), but you can choose from other positions such as right_indicator, top_left_indicator, or bottom_center_indicator. The size of the indicator can also be customized using the indicator_size prop, with sizes ranging from extra_small to extra_large, providing flexible options to suit your badge’s design and functionality.

Extra Small Indicator - Left

Small - Right

Medium - Top Left

Large - Top Center

Extra Large - Top Right

Extra small - Middle Left

Extra small - Middle Right

Extra small - Bottom Left

Extra small - Bottom Center

Extra small - Bottom Right

<.badge left_indicator indicator_size="extra_small">
  Extra Small - Left
</.badge>

<.badge right_indicator indicator_size="small">
  Small - Right
</.badge>

<.badge top_left_indicator indicator_size="medium">
  Medium - Top Left
</.badge>

<.badge top_center_indicator indicator_size="large">
  Large - Top Center
</.badge>

<.badge top_right_indicator indicator_size="extra_large">
  Extra Large - Top Right
</.badge>

<.badge middle_left_indicator indicator_size="medium">
  Medium - Middle Left
</.badge>

<.badge middle_right_indicator indicator_size="medium">
  Medium - Middle Right
</.badge>

<.badge bottom_left_indicator indicator_size="medium">
  Medium - Bottom Left
</.badge>

<.badge bottom_center_indicator indicator_size="medium">
  Medium - Bottom Center
</.badge>

<.badge bottom_right_indicator indicator_size="medium">
  Medium - Bottom Right
</.badge>

Pinging prop in Phoenix LiveView Badge Component

In the Mishka Chelekom badge component, you can enhance the indicator with a pinging animation by setting the pinging prop to true. This creates a subtle pulsing effect, drawing attention to the indicator. By default, the pinging prop is set to false, meaning the indicator remains static unless enabled. This feature adds a dynamic element to your design, making it ideal for highlighting important actions, notifications, or statuses.

Extra Small - Left

Small - Right

Medium - Top Left

Large - Top Center

Extra Large - Top Right

<.badge left_indicator pinging>
  Extra Small - Left (Pinging)
</.badge>

<.badge right_indicator pinging>
  Small - Right (Pinging)
</.badge>

<.badge top_left_indicator pinging>
  Medium - Top Left (Pinging)
</.badge>

<.badge top_center_indicator pinging>
  Large - Top Center (Pinging)
</.badge>

<.badge top_right_indicator pinging>
  Extra Large - Top Right (Pinging)
</.badge>

Circle prop

The circle prop ensures the badge has equal width and height, allowing you to create circular or square badge shapes. This prop is ideal for designs that require a consistent, symmetrical look, making it perfect for icon badges or any elements that need uniform dimensions for a clean and polished appearance.

<.badge circle size="extra_small">Extra Small Badge</.badge>

<.badge circle size="small">Small Badge</.badge>

<.badge circle size="medium">Medium Badge</.badge>

<.badge circle size="large">Large Badge</.badge>

<.badge circle size="extra_large">Extra Large Badge</.badge>

<.badge circle rounded="full" size="extra_large">
  Extra Large Badge
</.badge>

Font Wight prop

The font_wight: This prop controls the weight (thickness or boldness) of text, utilizing Tailwind's font-weight classes such as font-light, font-bold, or font-semibold. You can easily adjust the text weight to match your design needs, whether you need subtle emphasis or a bolder look.

Bold

Semibold

Medium

Light

Black

<.badge font_weight="font-bold">Bold</.badge>

<.badge font_weight="font-semibold">Semibold</.badge>

<.badge font_weight="font-medium">Medium</.badge>

<.badge font_weight="font-Silver">Silver</.badge>

<.badge font_weight="font-black">Black</.badge>

Badge component props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction.
variant	string	No	Determines the style of the banner. Supported values: default, outline, transparent, shadow, bordered, gradient.
size	string	No	Determines the overall size of the badge. Supported sizes: extra_small, small, medium, large, extra_large.
rounded	string	No	Determines the border radius. Supported values: extra_small, small, medium, large, extra_large, full, none.
color	string	No	Determines the color theme of the badge. Supported colors: natural, primary, secondary, success, warning, danger, info, silver, misc, dawn. The default and bordered variants have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
font_weight	string	No	Determines the font weight. Default is font-normal.
icon	string	No	Icon displayed alongside the badge content.
class	string	No	Custom CSS class for additional styling.
indicator_class	string	No	CSS class for additional styling of the badge indicator.
indicator_size	string	No	Specifies the size of the badge indicator.
params	map	No	A map of additional parameters used for element configuration. Default: {kind: "badge"}.
pinging	boolean	No	Adds a ping animation to the badge indicator.
circle	boolean	No	Renders the badge as a circular element.
dismiss	boolean	No	Adds a dismiss button to the badge.
right_dismiss	boolean	No	Adds a dismiss button positioned on the right side of the badge.
left_dismiss	boolean	No	Adds a dismiss button positioned on the left side of the badge.
indicator	boolean	No	Adds a default indicator to the badge.
right_indicator	boolean	No	Adds an indicator positioned on the right side of the badge.
left_indicator	boolean	No	Adds an indicator positioned on the left side of the badge.
top_left_indicator	boolean	No	Adds an indicator positioned at the top left of the badge.
top_center_indicator	boolean	No	Adds an indicator positioned at the top center of the badge.
top_right_indicator	boolean	No	Adds an indicator positioned at the top right of the badge.
middle_left_indicator	boolean	No	Adds an indicator positioned at the middle left of the badge.
middle_right_indicator	boolean	No	Adds an indicator positioned at the middle right of the badge.
bottom_left_indicator	boolean	No	Adds an indicator positioned at the bottom left of the badge.
bottom_center_indicator	boolean	No	Adds an indicator positioned at the bottom center of the badge.
bottom_right_indicator	boolean	No	Adds an indicator positioned at the bottom right of the badge.
right_icon	boolean	No	Positions the icon on the right side of the badge.
left_icon	boolean	No	Positions the icon on the left side of the badge.

Badge CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - outline - transparent - shadow - bordered - gradient	Yes
`--color`	string	natural - white - dark - primary - secondary - success - warning - danger - info - silver - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - full - none	Yes
`--only`	string	badge	Yes
`--module`	string	Something	NO