Hi @aryamanpuri , yes please do! Essentially the component needs to accept an href prop and then output the right html element.

If the consumer passes an href the component should render as link tag <a>
If the consumer passes an onClick the component should render as a button tag <button>

You can essentially look at how EuiButton handles the render:

eui/src/components/button/button.tsx

Lines 168 to 195 in f11ea60

    
           // <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend 
        
           // this is a button and piggyback off its disabled styles. 
        
           if (href && !isDisabled) { 
        
             const secureRel = getSecureRelForTarget({ href, target, rel }); 
        
             return ( 
        
               <a 
        
                 className={classes} 
        
                 href={href} 
        
                 target={target} 
        
                 rel={secureRel} 
        
                 ref={buttonRef as Ref<HTMLAnchorElement>} 
        
                 {...rest as AnchorHTMLAttributes<HTMLAnchorElement>}> 
        
                 {innerNode} 
        
               </a> 
        
             ); 
        
           } 
        
           let buttonType: ButtonHTMLAttributes<HTMLButtonElement>['type']; 
        
           return ( 
        
             <button 
        
               disabled={isDisabled} 
        
               className={classes} 
        
               type={type as typeof buttonType} 
        
               ref={buttonRef as Ref<HTMLButtonElement>} 
        
               {...rest as ButtonHTMLAttributes<HTMLButtonElement>}> 
        
               {innerNode} 
        
             </button>

And we have two helper services for the TS types you can reuse similar to EuiButton here:

eui/src/components/button/button.tsx

Lines 79 to 96 in f11ea60

    
           type EuiButtonPropsForAnchor = PropsForAnchor< 
        
             EuiButtonProps, 
        
             { 
        
               buttonRef?: Ref<HTMLAnchorElement>; 
        
             } 
        
           >; 
        
           type EuiButtonPropsForButton = PropsForButton< 
        
             EuiButtonProps, 
        
             { 
        
               buttonRef?: Ref<HTMLButtonElement>; 
        
             } 
        
           >; 
        
           export type Props = ExclusiveUnion< 
        
             EuiButtonPropsForAnchor, 
        
             EuiButtonPropsForButton 
        
           >;

Be sure to check the whole file as not everything was captured in those permalinks.

Thanks!

	// <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
	// this is a button and piggyback off its disabled styles.
	if (href && !isDisabled) {
	const secureRel = getSecureRelForTarget({ href, target, rel });

	return (
	<a
	className={classes}
	href={href}
	target={target}
	rel={secureRel}
	ref={buttonRef as Ref<HTMLAnchorElement>}
	{...rest as AnchorHTMLAttributes<HTMLAnchorElement>}>
	{innerNode}
	</a>
	);
	}

	let buttonType: ButtonHTMLAttributes<HTMLButtonElement>['type'];
	return (
	<button
	disabled={isDisabled}
	className={classes}
	type={type as typeof buttonType}
	ref={buttonRef as Ref<HTMLButtonElement>}
	{...rest as ButtonHTMLAttributes<HTMLButtonElement>}>
	{innerNode}
	</button>

	type EuiButtonPropsForAnchor = PropsForAnchor<
	EuiButtonProps,
	{
	buttonRef?: Ref<HTMLAnchorElement>;
	}
	>;

	type EuiButtonPropsForButton = PropsForButton<
	EuiButtonProps,
	{
	buttonRef?: Ref<HTMLButtonElement>;
	}
	>;

	export type Props = ExclusiveUnion<
	EuiButtonPropsForAnchor,
	EuiButtonPropsForButton
	>;

EuiBadge should allow for href #2831

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions

EuiBadge should allow for `href` #2831