@cavilha/badge
Version:
A badge component used to highlight data features such as status, types, a numeric feature, or tagging an item.
2 lines (1 loc) • 1.64 kB
JavaScript
import o from"react";import{styled as t}from"@cavilha/theme";var a=t("span",{display:"inline-block",textAlign:"center",fontFamily:"$untitled",fontWeight:"$semibold",textTransform:"uppercase",fontSize:"$bodySmall",maxHeight:22,borderRadius:"$small",padding:"1px $small2",marginRight:"$small2",variants:{align:{topRight:{top:0,right:0,position:"absolute",marginRight:0},topLeft:{top:0,left:0,position:"absolute"},bottomRight:{bottom:0,right:0,position:"absolute",marginRight:0},bottomLeft:{bottom:0,left:0,position:"absolute",marginRight:0}},type:{text:{borderRadius:"$small",padding:"1px $small2"},count:{borderRadius:"$medium"},dot:{borderRadius:"$medium",height:"$small2",width:"$small2",padding:"0"}},color:{default:{backgroundColor:"$neutral2",color:"$neutral5"},light:{boxShadow:"inset 0 0 0 1px $colors$neutral2",color:"$neutral5"},dark:{backgroundColor:"$neutral5",color:"$mono1"},success:{backgroundColor:"$success2",color:"$alwaysWhite"},danger:{backgroundColor:"$danger2",color:"$alwaysWhite"},warning:{backgroundColor:"$warning2",color:"$alwaysBlack"},info:{backgroundColor:"$info4",color:"$alwaysWhite"},transparent:{backgroundColor:"transparent",color:"$neutral5"}}},defaultVariants:{color:"default"}}),r=function(t){var r=t.count,l=void 0===r?"":r,e=t.showZero,n=void 0===e||e,i=t.overflowCount,s=void 0===i?99:i,c=t.dot,d=void 0!==c&&c,u=t.text,g=t.children,m=t.color,$=t.align,p=t.css,b=l>s?"".concat(s,"+"):l,h="0"===b||0===b;if(d||h&&!n)return o.createElement(a,{color:m,type:"dot",align:$,css:p});var f=b||h?"count":"text";return o.createElement(a,{color:m,type:f,align:$,css:p},g||("count"===f?b:u))};export{r as default};