Im using Semantic UI-React. My question is how to position a label or text under an icon? There are only two default options which is left and right of the icon. However I want to position the label below the icon.
Im using Semantic-React library.
For example:
<Button icon labelPosition='left'>
<Icon name='pause' />
Pause
</Button>
In the above snippet the label 'Pause' is added on the left side of the icon in the button.
My requirement is, I want to add the label 'Pause below the icon in the button'. I tried setting the:
labelPosition='down' or 'bottom'
However it does not work. Is there any way to do this?
I came across the same problem.
I believe that this could be done only by overriding the CSS properties of the Button element.
Please try providing !important to the CSS values, since semantic UI takes the highest priority when it comes to priority of the properties.
You can either use a class and define the style there, or else use a specific selector like this: div.ui.stackable.two.column.grid.button{.
Please let me know if this fixes, otherwise I have another solution to it.
Put a line break between the icon and the text.
<Button icon>
<Icon name='pause' />
<br />
Pause
</Button>
To change the amount of space between the icon and the text, you can add margin to the line break.
<Button icon>
<Icon name='pause' />
<br style={{marginBottom: '8px'}} />
Pause
</Button>
Related
Going to add an icon and the challenge is that I can't find where I can deactivate <strong></strong>. Is it possible to manipulate the icon with a tag? Library that is made is custom made.
<PlainButton
onClick={showModal}
title={modalTitle}
aria-label={modalTitle}
style={{ lineHeight: 1 }}
disabled={!notAcces}>
<SvgIcon.PreviewDocument width={19} height={19} />
</PlainButton>
In the picture the other icon is normal, and the previewDocument has the tag <strong>. Just want to make it normal.
When using a tooltip around an icon button the button automatically will get the a11y name of the tooltip title. The example from the docs makes it so a screen reader reads it as "Delete, button" which is good.
<Tooltip title="Delete">
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
But trying to do the same thing when simply using an svg icon does not work.
Instead having just
<Tooltip title="Delete">
<DeleteIcon />
</Tooltip>
Makes it so the image is inaccessible due to how MUI default handles a11y for SvgIcons. So what I can do is simply passing the tooltip title to the titleAccess prop of the icon.
const title = "Delete";
<Tooltip title={title}>
<DeleteIcon titleAccess={title}/>
</Tooltip>
Which works fine. The tooltip works on hover and a screen reader can access it and reads it as "Delete, image". Is this the way how this is supposed to be done though? Or is it possible for the icon to pickup the title from the tooltip directly so the title does not need to be set twice?
The use case I have for this is to show an icon that explains stock status of an item. So it is supposed to be non interactive but possible for users to get a text explanation if they don't understand the icon.
Here is a codesandbox with the different examples running:
https://codesandbox.io/s/mui-icon-tooltip-a11y-9smgoc?file=/src/App.tsx
As i was trying to add link in my custom tooltip of recharts, i can not able to hover on tooltip content it will be hidden automatically, is there any props that i need to override for of recharts to make it clickable?.
Below is my tooltip
<Tooltip content={(value)=>renderTooltip(value)} />
Below is my renderTooltip which i am using it
const renderTooltip = (props) => {
if (props.active) {
return (
<div >
<div className="tool-tip">
<span className="tool-tip-footer">
{' '}
Google
</span>
</div>
</div>
);
}
I got this working by doing adding trigger='click' prop and adding a style pointer-events: auto to the parts of the tooltip I wanted to be clickable.
The recharts tooltip wrapper has pointer-events: none which prevented clicking it even after changing the trigger.
The Tooltip component calculates internally if the content has to be shown or not, so you don't have to. This might be causing some issues beyond your control.
I am new to framer motion and I want to make a hover animation on the button. I was able to create the animation successfully but when I hover over the button the text gets distorted and I want to fix it, I have done research but i wasn't able to find a solution
I want to apply animation only to the button not the text inside it
I have tried adding <motion.button layout />
I have tried adding <motion.button layout="position" />
I have also added <span>button text</span>
but the issue is still there
<motion.button
style={{
padding: "10px 30px",
border: "none",
marginTop: "20px"
}}
whileHover={{
scale: 1.1
}}
whileTap={{
scale: 0.9
}}
>
Button
</motion.button>
It would be great if someone would help me in fixing this issue,
https://codesandbox.io/s/late-darkness-ejuzt?file=/src/App.js:134-419 is my code sandbox link where u can see what I'm saying
thanks!
According to this, you can't 'disable' scaling for child components with framer. Try to use react components and variables (or CSS) to disable child scaling.
I have this button from https://callstack.github.io/react-native-paper/button.html
<Button onPress={goSignUp}>
Sign Up
</Button>
It hasn't got a background color (just what I want), but when I press it, a background color with a ripple fades in. How do I remove the onPress background color?
Please use TouchableOpacity
if you used TouchableHighlight
Try to add this
<TouchableHighlight underlayColor='none' />
You may ask, why don't you use a touchable opacity instead of the button? The answer is that I have more buttons (with background color) and I want to have all buttons with the same default style which comes with react-native-paper.
I have found a solution (wrap the button inside the TouchableOpacity) but I think there has to be a better way...
<TouchableOpacity onPress={goSignUp}>
<Button style={styles.button}>Sign Up</Button>
</TouchableOpacity>
This library has a prop for buttons called mode, you can try pass mode props to it, or just use your custom style
<Button mode='contained'>Sign Up</Button>
or
<Button style={{width: 200, height: 50, backgroundColor: 'blue'}}>Sign Up</Button>