button sizes about octagon

[eddier]

Try adding the className prop of 'tripwire' while using the type of positive rather than primary. Example:

<Form.Button positive
className='tripwire'
type='submit'
disabled={!valid || submitting}
data-hook={generate-supervisor-button}>Generate Supervisor</Form.Button>

[devongleeson]

We tried changing it, as suggested, but are still seeing differently rendered sizes.

<Flexbox>
	<Form.Button
	  className='tripwire'
	  negative
	  data-hook={`cancel-generate-supervisor-button`}
	  onClick={this.handleClose}>Cancel
	</Form.Button>
	<Form.Button
	  className='tripwire'
	  positive
	  type='submit'
	  disabled={!valid || submitting}
	  data-hook={`generate-supervisor-button`}>Generate Supervisor</Form.Button>
</Flexbox>

[eddier]

That isn't applying the tripwire class to the actual button element. Can you call it following the styleguidist example? So it would be:

<Button
className='tripwire'
positive
type='submit'
disabled={!valid || submitting}
data-hook={generate-supervisor-button}>Generate Supervisor

[devongleeson]

Yes, that worked! Thanks.

[ggascoigne]

So is this a work around or an expected behavior? Seems odd to have to explicitly specify what I'd expect to just be the theme default.

[eddier]

Since the SUI button component has so many variations it doesn't seem like a good idea to change the default behavior, that's why we chose to implement it as a class that the developer can activate. This retains all of the default SUI button styling for future use if desired.